如何修复PHP foreach循环中错误地循环的jQuery代码 [英] How to fix a jQuery code looping incorrectly in a PHP foreach loop

问题描述

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

I'm trying to loop a piece of jQuery code inside a foreach loop. Each article in the loop have a phone number custom post type related (ACF). At this point the loop works well.

如您所见，当用户单击以显示号码时，jQuery代码仅将图像替换为另一个图像(例如:显示电话号码"图像变为"555-555-1234").

As you see, the jQuery code only replace an image to another while user clicks in order to show the number (Ex : "Display Phone Number" image, becomes "555-555-1234").

问题在于，当我单击任意图像以显示数字时...所有文章都同时显示其电话号码.我认为我的jQuery代码中有一个ID问题.经过两天的搜索和测试不同的代码后，此问题仍未解决.

The problem is that when I click in any image to display number...all articles show their phone number at the same time. I think is an ID problem in my jQuery code. After two days of searching and testing different codes this problem still not resolved yet.

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

Any suggestions/tracks will be very welcome !

谢谢

====

我尝试过的事情:

1. 我试图将jQuery代码放在foreach之外(结果相同)

1. I have tried to put the jQuery code outside the foreach (same result)

我试图将id图像更改为一个类(效果更好)

I have tried to change the id image into a class (works better)

我尝试了不同的jQuery函数(replaceWith()，show()等)

I have tried different jQuery functions (replaceWith(), show(), etc)

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>
}

推荐答案

注意"this"上下文

Take note of the 'this' Context

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

When an event fires in jquery the callback function this context is set to the element which the event was fired from.

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-* 属性来实现您寻求的结果.

Advice: You shouldn't generate same jquery code inside each iteration of the for each. Since you're repeating unnecessary code. You can harness HTML data-* attributes to achieve the outcome you seek.

这篇关于如何修复PHP foreach循环中错误地循环的jQuery代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！