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。