WP Loop Geo + jQuery .hide() 无法正常工作

Question

我有一个 WP 循环，其中每个 post 都有 4 个基于国家/地区的图像的集合（使用 ACF）。

我只想为每个国家/地区输出 1 张图像，但是它显示了每个 post 的全部 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;
?>

我最初有代码，例如 <div id="resultQLAU" style="display:none">，只是在脚本中有 jQuery("#resultQLAU").show();，它只输出第一个第一个 post 的 GEO 图像（因此 GEO 对那个 1 post 工作正确）不确定是什么问题？

非常感谢您的帮助。谢谢

Answer 1

您在循环中使用了 ID，因此所有块都将具有相同的 ID，这并不好，因为 ID 需要是唯一的。您可以通过根据迭代添加 suffix/prefix 来更改此设置，并改用类。

1) 在循环中添加一个新的增量变量，如下所示：

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

2) 为每个id追加$i的内容，例如：

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

在任何有 ID 的地方都这样做。

WP Loop Geo + jQuery .hide() 无法正常工作

WP Loop Geo + jQuery .hide() not working correctly

php

wordpress

jquery

loops

advanced-custom-fields