WP 루프 Geo + jQuery .hide()가 올바르게 작동하지 않습니다.

Question

각 게시물에 ACF를 사용하여 4 개의 국가 별 이미지 모음이있는 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가 한 게시물에 대한 올바른 작업 그래서) 첫 번째 게시물의 첫 번째 GEO 이미지를 출력 됨 스크립트 jQuery("#resultQLAU").show(); 가 확실하지 어떤 문제가 있었다 있었다?

귀하의 도움을 많이 주시면 감사하겠습니다. 감사합니다

Answer 1

당신의 루프 안에 ID을 사용하고 있습니다. 그래서 모든 블록은 고유해야 할 id가 같지 않은 동일한 id를 갖게됩니다. 반복에 따라 접미사/접두어를 추가하고 클래스를 대신 사용하여이 값을 변경할 수 있습니다.

1)과 같이 루프 내부에 새로운 VAR에게 증가를 추가

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

2) 각 ID에 대해 $ I의 내용을 추가, 예를 들어 :

는

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

사방이 작업을 수행 너는 이드가있어.