如何在 à foreach 循环内的 jQuery 代码中定位 ACF 字段？

Question

如何在 à foreach 循环内的 jQuery 代码中定位 ACF 字段？

目前，帖子在 foreach 循环中循环。每篇文章都会展示一位教练，上面有照片、头衔、简短描述和电话号码。所有这些元素都是 ACF 自定义字段，需要在后台为每个人填写。

到此为止就好了。

每个教练的电话号码是隐藏的，用户需要点击一个按钮（这是一个图像“显示号码”）才能看到电话（这也是另一个图像）。我正在使用 .attr() jQuery 函数将第一个图像替换为第二个图像。

问题：当用户点击任何“显示编号”图像时，会显示最后一个图像编号。

期望（例如：Nicolas 为 555-555-555 | Andrea 为 555-485-784 | Melody 为 555-124-332） 目前（例如：Nicolas 为 555-124-332 | Andrea 为 555-124-332 | Melody 为 555-124-332）

任何建议将不胜感激。

谢谢

foreach ($related_posts_articles as $related_post ){

    <div class="col-sm-6 col-md-6 col-lg-3 col-xs-12">

        <div>
            <a href="<?php echo get_permalink($related_post->ID); ?> ">
                <?php echo get_the_post_thumbnail($related_post->ID,"square-300",array('class' => 'img-responsive')); ?>   
            </a>
            <div>
                <a href="<?php echo get_permalink($related_post->ID); ?>">
                    <h2>
                        <?php echo wp_html_excerpt(strip_tags(get_field('acf_titre_mini', $related_post->ID)), 30, '...' ); ?>
                    </h2>
                </a>
                <div>
                    <?php echo wp_html_excerpt( strip_tags(get_field('acf_description_mini',$related_post->ID)), 129, '...' ); ?>    
                </div>

                <!-- START bloc -->
                <?php if( get_field('acf_numero_image', $related_post->ID) ): ?>
                    <div align="center">
                        <img class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
                        <script>
                            jQuery(document).ready(function($) {
                                $(".input_img").click(function() {
                                    $(this).attr("src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
                                });
                            });
                        </script>
                    </div>
                <?php endif; ?>
                <!-- END bloc -->
            </div>
        </div>
   </div>

}

Answer 1

问题：当用户点击任何“显示编号”图像时，会显示最后一个图像编号。

这是因为您在循环的每次迭代中都添加了一个 .click() 处理程序，其中 if( get_field('acf_numero_image', $related_post->ID) ) 是真实的，特别是这部分：

$(".input_img").click(function() {
    $(this).attr("src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
});

如果您查看呈现的 HTML 的页面源代码，它将如下所示：

<!-- loop 1 -->
<script>
    jQuery(document).ready(function($) {
        $(".input_img").click(function() {
            $(this).attr("src", "some_image_1.jpg" );
        });
    });
</script>

<!-- loop 2 -->
<script>
    jQuery(document).ready(function($) {
        $(".input_img").click(function() {
            $(this).attr("src", "some_image_2.jpg" );
        });
    });
</script>

<!-- loop 3 -->
<script>
    jQuery(document).ready(function($) {
        $(".input_img").click(function() {
            $(this).attr("src", "some_image_3.jpg" );
        });
    });
</script>

<!-- etc. -->

因为您在每个循环中添加另一个.click() 处理程序，所以当您单击.input_img 时，它将遍历您的每个click 处理程序并将src 更改为some_image_1.jpg，然后将@987654331 @，依此类推，直到到达最后一个，因此它似乎只显示最后一个图像编号。

使用自定义 data- 属性并将 .click() 处理程序移到循环之外将解决此问题 - 以下是简略示例：

<?php
    foreach ($related_posts_articles as $related_post) {

        // wrapper <div> / other HTML here

        ?>
            <!-- START bloc -->
            <?php if (get_field('acf_numero_image', $related_post->ID)): ?>
                <div align="center">

                    <!--
                        Adding custom data-acf-numero-image attribute here containing field value
                    -->
                    <img class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" data-acf-numero-image="<?php the_field('acf_numero_image', $related_post->ID); ?>" />

                </div>
            <?php endif; ?>
            <!-- END bloc -->
        <?php

        // closing <div> elements here
    }
?>

<!--
    One single block of JS to handle all clicks to .input_img, rather than adding
    duplicate click handlers inside the foreach loop:
-->
<script>
    jQuery(document).ready(function($) {
        $(".input_img").click(function() {
            // Get "acf_numero_image" value from custom data- attribute
            var acfNumeroImage = $(this).attr("data-acf-numero-image");

            // Update src attribute with custom acf_numero_image
            $(this).attr("src", acfNumeroImage);
        });
    });
</script>