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

Question

我试图在 foreach 循环中循环一段 jQuery 代码。循环中的每篇文章都有一个 phone 数字自定义 post 类型相关 (ACF)。此时循环运行良好。

如您所见，jQuery 代码仅在用户点击以显示数字时将一张图片替换为另一张图片（例如："Display Phone Number" 图片，变为“555-555-1234”） .

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

任何 suggestions/tracks 都将非常受欢迎！

谢谢

====

我尝试过的事情：

我尝试将 jQuery 代码放在 foreach 之外（结果相同）
我尝试将 id 图像更改为 class（效果更好）
我尝试了不同的 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>
}

Answer 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-* 属性来实现您想要的结果。

Answer 2

您为所有图像指定了相同的 class 名称。此外，通过循环，您将添加很多脚本。您可以将 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); ?>" >
}

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

How to fix a jQuery code looping incorrectly in a PHP foreach loop

php

foreach

jquery

attr

advanced-custom-fields