如何修复在 PHP foreach 循环中错误循环的 jQuery 代码答案

【问题标题】：How to fix a jQuery code looping incorrectly in a PHP foreach loop如何修复在 PHP foreach 循环中错误循环的 jQuery 代码
【发布时间】：2020-01-03 12:14:16
【问题描述】：

我正在尝试在 foreach 循环中循环一段 jQuery 代码。循环中的每篇文章都有一个电话号码自定义帖子类型相关 (ACF)。此时循环运行良好。

如您所见，jQuery 代码仅在用户单击以显示号码时将图像替换为另一个图像（例如：“显示电话号码”图像，变为“555-555-1234”）。

问题是当我点击任何图片显示号码时...所有文章同时显示他们的电话号码。我认为是我的 jQuery 代码中的 ID 问题。经过两天的搜索和测试不同的代码，这个问题仍然没有解决。

非常欢迎任何建议/曲目！

谢谢

====

我尝试过的事情：

我尝试将 jQuery 代码放在 foreach 之外（结果相同）
我已尝试将 id 图像更改为类（效果更好）
我尝试过不同的 jQuery 函数（replaceWith()、show() 等）

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>
                        <img class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
                        <script>
                            jQuery(document).ready(function($) {
                                $( ".input_img" ).click(function() {
                                    $( ".input_img" ).attr( "src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
                                });
                            });
                        </script>
                    </div>
                <?php endif; ?>
                <!-- END bloc number -->

            </div>
        </div>
   </div>
}

【问题讨论】：

标签： php jquery foreach advanced-custom-fields attr

【解决方案1】：

注意“this”上下文

当事件在 jquery 中触发时，回调函数 this 上下文设置为触发事件的元素。

jQuery(document).ready(function($) {
    $(".input_img").click(function() {
        // Use `this` to target the event element
        $(this).attr("src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
    });
});

建议：您不应该在for each 的每次迭代中生成相同的 jquery 代码。由于您正在重复不必要的代码。您可以利用 HTML data-* 属性来实现您所寻求的结果。

【讨论】：

有效！这解决了用户点击显示事件，谢谢。知道如何定位每个帖子的特定编号，它在任何地方都显示相同的编号。
@Nick83 您能否进一步扩展您的问题？如果答案已经解决了原始问题，我建议您标记它。这有助于将来可能遇到此问题的其他人。
Riddell foreach 中的每个帖子在名为“acf_numero_image”的变量中作为不同的 ACF 图像编号。单击任何帖子的“显示电话号码”时，会显示相同的图像编号。我的代码没有针对 ACF 变量来显示正确的图像。
@Nick83 我建议为此提出新问题。我记得几年前遇到过这个问题并使用wp_reset_postdata() 这可能会帮助support.advancedcustomfields.com/forums/topic/…
我终于得到了完整的代码！ @Riddell 感谢 ACF 链接并解决了我脚本的第一部分。最终代码在这里：stackoverflow.com/questions/57728343/…

【解决方案2】：

您为所有图像赋予相同的类名。此外，通过循环，您可以添加大量脚本。您可以将 Onclick 事件添加到图像并创建函数并获取数据并为您做事。此外，您可以向 img 标签添加额外属性以获取数据。也尝试输入不同的 ID，如下所示，

foreach ($related_posts_articles as $key=>$related_post ){
 <img id="img-<?php echo $key; ?>" onclick="myFunction(this)" class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
}

【讨论】：