WP Loop Geo + jQuery .hide（）無法正常工作

Question

我有一個WP循環，其中每個帖子都有4個國家基於圖像（使用ACF）的集合。

我只想在每個國家/地區輸出1張圖片，但是它會在每個帖子中顯示全部4張圖片。

<?php 
$args = array('post_type' => 'quick_links', 'posts_per_page' => 3); 
$loop = new WP_Query($args); 
while ($loop->have_posts()) : $loop->the_post(); 
    $image_au = get_field("au_image"); 
    $image_nz = get_field("nz_image"); 
    $image_us = get_field("us_image"); 
    $image_gl = get_field("global_image"); //default image 
?> 
<script type="text/javascript"> 

var image_au = <?php echo json_encode($image_au['url']); ?>; 
var image_nz = <?php echo json_encode($image_nz['url']); ?>; 
var image_us = <?php echo json_encode($image_us['url']); ?>; 
var image_gl = <?php echo json_encode($image_gl['url']); ?>; 

jQuery.get("http://ipinfo.io", function (response) { 
    if (response.country === "AU"){ 
     jQuery("#resultQLAU").show(); 
     jQuery("#resultQLNZ").hide(); 
     jQuery("#resultQLUS").hide(); 
     jQuery("#resultQLGlobal").hide(); 
    } else if(response.country === "NZ"){ 
     jQuery("#resultQLNZ").show(); 
     jQuery("#resultQLAU").hide(); 
     jQuery("#resultQLUS").hide(); 
     jQuery("#resultQLGlobal").hide(); 
    } else if(response.country === "US"){ 
     jQuery("#resultQLUS").show(); 
     jQuery("#resultQLNZ").hide(); 
     jQuery("#resultQLAU").hide(); 
     jQuery("#resultQLGlobal").hide(); 
    } else { 
     jQuery("#resultQLGlobal").show(); 
     jQuery("#resultQLNZ").hide(); 
     jQuery("#resultQLUS").hide(); 
     jQuery("#resultQLAU").hide(); 
    } 
    if(image_au === "" && image_nz === "" && image_us === "" && image_gl !== ""){ 
     jQuery("#resultQLGlobal").show(); 
    } 
}, "jsonp"); 
</script> 
<?php 
    echo '<div class="col-lg-4 col-sm-6" style="padding:2px">'; 
    echo '<a href="' . get_field('page_url') . '" class="portfolio-box">'; 
?> 
<div id="resultQLAU"> 
<img class="img-responsive" src="<?php echo $image_au['url']; ?>" alt="<?php echo $image_au['alt']; ?>" /> 
</div> 
<div id="resultQLNZ"> 
<img class="img-responsive" src="<?php echo $image_nz['url']; ?>" alt="<?php echo $image_nz['alt']; ?>" /> 
</div> 
<div id="resultQLUS"> 
<img class="img-responsive" src="<?php echo $image_us['url']; ?>" alt="<?php echo $image_us['alt']; ?>" /> 
</div> 
<div id="resultQLGlobal"> 
<img class="img-responsive" src="<?php echo $image_gl['url']; ?>" alt="<?php echo $image_gl['alt']; ?>" /> 
</div> 
<?php 
echo '<div class="portfolio-box-caption">'; 
echo '<div class="portfolio-box-caption-content">'; 
echo '<div class="project-category text-faded">' . get_the_title() . '</div>'; 
echo '<div class="project-name">' . get_the_content() . '</div>'; 
echo '</div>'; 
echo '</div>'; 
echo '</a>'; 
echo '<h6 class="news-title text-center"><a href="' . get_field('page_url') . '">' . get_the_title() . '<span style=""> <i class="fa fa-angle-double-right"></i></span></a></h6>'; 
echo '</div>'; 
endwhile; 
?> 

我本來代碼e.g <div id="resultQLAU" style="display:none">，只是曾在腳本jQuery("#resultQLAU").show();其中outputed第一篇文章中，只有第一 GEO圖像（所以GEO是爲1周後工作正確） 不知道是什麼問題？

您的幫助將不勝感激。謝謝

Answer 1

您在循環中使用ID所以所有的塊都有相同的id，因爲id不需要是唯一的。你可以通過添加一個後綴/前綴來改變它，這取決於迭代和使用類。

1）增加一個新的變種增量您的循環內是這樣的：

$i = 0 
while ($loop->have_posts()) : $loop->the_post(); 
$i++; 

2）每個ID追加$ i的內容，例如：

jQuery(".resultQLAU_<?php echo $i; ?>").show(); 

處處做到這一點你有這個ID。