Jquery 在每个循环的 for 循环中使用 $this

Posted

技术标签:

【中文标题】Jquery 在每个循环的 for 循环中使用 $this【英文标题】:Jquery using $this in a for loop in an each loop 【发布时间】:2017-02-08 20:20:27 【问题描述】:

这是我的基本 jquery 图像滑块代码。问题是我想在一页上有很多滑块,每个滑块都有不同数量的图像。每个滑块都有 .portfolio-img-container 类和每个图像 .portfolio-img。

基本的html设置如下:

<div class="portfolio-item"><div class="portfolio-img-container"><img class="portfolio-img"><img class="portfolio-img"></div></div>

<div class="portfolio-item"><div class="portfolio-img-container"><img class="portfolio-img"><img class="portfolio-img"></div></div>

还有 javascript

 $.each($('.portfolio-img-container'), function()


        var currentIndex = 0,
            images = $(this).children('.portfolio-img'),
            imageAmt = images.length;


        function cycleImages() 
            var image = $(this).children('.portfolio-img').eq(currentIndex);
            images.hide();
            image.css('display','block');
        


        images.click( function() 
            currentIndex += 1;
            if ( currentIndex > imageAmt -1 ) 
                currentIndex = 0;

            

            cycleImages();
        );


    );

我的问题出现在函数 cycleImages() 中。我在单击任何图像时调用此函数。但是,它不起作用:图像被隐藏,但“显示:块”并未应用于任何图像。我通过使用 devtools 推断出我的问题在于 $(this)。变量图像不断出现未定义。如果我将 $(this) 更改为简单的 $('.portfolio-img'),它会选择每个 .portfolio-img-container 中的每个 .portfolio-img,这不是我想要的。谁能建议一种仅选择当前 .portfolio-img-container 中的投资组合图像的方法?

谢谢!

【问题讨论】:

您可以使用:cycleImages.call(this); 设置相关上下文,更好的是在cycleImages() 方法中设置有关currentIndex 的逻辑,然后使用:images.click(cycleImages); 绑定它 【参考方案1】:

cycleImages 中的this 是全局对象(我假设您没有使用严格模式),因为您调用它的方式。

最好将this 包装一次,记住它到一个变量中,然后使用它,因为cycleImages 会覆盖它:

$.each($('.portfolio-img-container'), function() 
    var $this = $(this);                                                 // ***

    var currentIndex = 0,
        images = $this.children('.portfolio-img'),                       // ***
        imageAmt = images.length;

    function cycleImages() 
        var image = $this.children('.portfolio-img').eq(currentIndex);   // ***
        images.hide();
        image.css('display', 'block');
    

    images.click(function() 
        currentIndex += 1;
        if (currentIndex > imageAmt - 1) 
            currentIndex = 0;
        

        cycleImages();
    );
);

旁注:

$.each($('.portfolio-img-container'), function()  /* ... */ );

可以更简单地写成:

$('.portfolio-img-container').each(function()  /* ... */ );

旁注2:

在 ES2015 及更高版本(您现在可以将其与转译一起使用)中,您可以使用箭头函数,因为箭头函数关闭 this 就像其他函数关闭变量一样。

【讨论】:

【参考方案2】:

您不能只在内部函数中引用this(see this answer 有很多更详细的解释):

var self = this; // put alias of `this` outside function
function cycleImages() 
  // refer to this alias instead inside the function
  var image = $(self).children('.portfolio-img').eq(currentIndex);
  images.hide();
  image.css('display','block');

【讨论】:

以上是关于Jquery 在每个循环的 for 循环中使用 $this的主要内容,如果未能解决你的问题,请参考以下文章

每个循环到(for循环或while循环)

jQuery if 语句在 for 循环中不起作用

[转发]for 循环,jQuery循环遍历详解

在使用 php for 循环生成 div 并为它们动态分配 ids 后,我如何使用 jquery 定位 ids?

在For循环中为点击功能分配JQuery

jquery $.each 和for怎么跳出循环终止本次循环