PHP foreach循环中jQuery点击事件批量触发问题排查求助

你遇到的问题确实是选择器和事件绑定逻辑的问题——因为你给所有电话号码触发按钮都用了同一个.input_img类，还在循环里重复生成了相同的JS代码，导致每次点击时$(".input_img")会选中页面上所有这个类的元素，所以所有图片都会一起替换。

修复核心思路 #

• 移出循环内的重复脚本：循环里重复生成JS代码会导致多次绑定事件，不仅冗余还容易出问题，统一把JS代码放在循环外（比如页面底部或外部JS文件）。
• 用this定位当前点击元素：在点击事件里，this指向的就是被点击的那个图片元素，只操作它就不会影响其他元素。
• 用data-*属性存储目标URL：把每个文章对应的号码图片URL存在按钮图片的自定义data属性里，这样JS可以直接读取，不用在循环里拼接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 number -->
            <?php if( get_field('acf_numero_image', $related_post->ID) ): ?>
            <div>
                <!-- 把目标号码图片URL存在自定义data属性中 -->
                <img class="input_img" 
                     src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>"
                     data-phone-src="<?php the_field('acf_numero_image', $related_post->ID); ?>">
            </div>
            <?php endif; ?>
            <!-- END bloc number -->
        </div>
    </div>
</div>
<?php
}

独立的JS代码（放在循环外，比如页面底部）

jQuery(document).ready(function($) {
    // 给所有.input_img只绑定一次点击事件
    $( ".input_img" ).click(function() {
        // 仅修改当前被点击的图片的src属性
        $(this).attr("src", $(this).data('phone-src'));
        
        // 如果需要点击后禁用切换功能，可以添加下面这行
        // $(this).off('click');
    });
});

额外优化建议 #

如果需要支持点击切换显示/隐藏电话号码（比如点击一次显示号码，再点击换回按钮图），可以把两个URL都存在data属性里，然后通过判断当前src来切换：

jQuery(document).ready(function($) {
    $( ".input_img" ).click(function() {
        const $btn = $(this);
        const currentSrc = $btn.attr('src');
        const btnSrc = $btn.data('btn-src');
        const phoneSrc = $btn.data('phone-src');
        
        $btn.attr("src", currentSrc === btnSrc ? phoneSrc : btnSrc);
    });
});

对应的PHP部分需要补充data-btn-src属性：

<img class="input_img" 
     src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>"
     data-btn-src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>"
     data-phone-src="<?php the_field('acf_numero_image', $related_post->ID); ?>">

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