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

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

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

目前,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>

}

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 处理程序并更改 srcsome_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>