WPループジオ+ jQuery .hide（）が正しく動作しない

Question

私は、各投稿に4つの国別画像（ACFを使用）のコレクションがあるWPループを使用しています。

国ごとに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; 
?> 

私はもともとコードは例えば<div id="resultQLAU" style="display:none">だけ（GEOは、その1つのポストのために正しい仕事をしていたので）最初のポストの唯一の最初の GEOイメージをoutputedスクリプト内jQuery("#resultQLAU").show(); がわからない何の問題がある持っていましたか？

あなたの助けに感謝します。ありがとう

Answer 1

あなたのループ内にIDを使用していますので、すべてのブロックは同じIDを持つようになります。idは一意にする必要があります。反復に応じて接尾辞/接頭辞を追加し、代わりにクラスを使用することでこれを変更できます。各idの

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

2）例えば、$ Iの内容を追加します：

1）新しいVARにこのようなあなたのループ内の増分を追加

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

はどこでもこれを行いますあなたはIDを持っています。