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

嘿，这个问题我太熟了！你这是踩了循环里JS事件绑定和服务器端变量覆盖的坑，咱们一步步来解决：

问题根源 #

1. 你在PHP循环里重复输出了jQuery(document).ready代码，而且所有按钮都用了同一个.input_img类。
2. PHP是服务器端执行的，循环结束后，<?php the_field('acf_numero_image', $related_post->ID); ?>会被替换成最后一次循环的教练号码图片地址——所以不管你点哪个按钮，都会用上最后那个地址。
3. 重复输出的JS代码也会导致冗余，甚至可能引发其他冲突。

解决方案 #

我们要做两件事：把每个按钮的专属号码图片地址存在HTML属性里，然后把JS代码移出循环，只执行一次。

修改后的PHP循环代码 #

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); ?>" 
                     data-phone-img="<?php the_field('acf_numero_image', $related_post->ID); ?>"
                >
            </div>
            <?php endif; ?>
            <!-- END bloc -->
        </div>
    </div>
</div>
<?php } ?>

单独的jQuery代码（放在页面底部，比如footer.php中） #

jQuery(document).ready(function($) {
    // 用事件委托绑定点击事件，兼容静态/动态生成的元素
    $(document).on('click', '.input_img', function() {
        // 从当前点击的按钮的data属性里获取专属的号码图片地址
        const phoneImgSrc = $(this).data('phone-img');
        // 替换图片src
        $(this).attr('src', phoneImgSrc);
    });
});

为什么这样改？ #

• 我们给每个按钮加了data-phone-img属性，把对应教练的号码图片地址存在这里，每个按钮都有自己的专属值，不会被循环覆盖。
• JS代码只执行一次，不用在循环里重复输出，避免了服务器端变量覆盖的问题。
• 事件委托的方式（$(document).on(...)）更灵活，哪怕后续页面动态添加教练卡片，点击事件依然有效。

这样修改后，每个“显示号码”按钮点击后就只会替换成对应教练的电话号码图片啦！

内容的提问来源于stack exchange，提问作者Nick83