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

Question

目前，post 正在 foreach 循环中循环。每个 post 都会赠送一位带照片、职位、简短描述和 phone 号码的教练。所有这些元素都是ACF自定义字段，需要在后台为每个人填写。

至此就可以了

Phone 每个教练的号码是隐藏的，用户需要点击一个按钮（这是一张图片 "Show Number"）才能看到 phone（这是另一张图片作为出色地）。我正在使用 .attr() jQuery 函数将第一张图片替换为第二张图片。

问题：当用户点击任何 "Show Number" 图像时，显示最后一个图像编号。

期望值（例如：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

The problem : when the user clicks on any "Show Number" image, the last image number is displayed.

这是因为您在循环的每次迭代中都添加了一个 .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，然后是 some_image_2.jpg，依此类推，直到到达 last，因此它似乎只显示最后一个图像编号。

使用自定义 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>

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

How to target an ACF field in a jQuery code inside à foreach loop?

jquery

advanced-custom-fields

attr