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

【问题标题】：Jquery using $this in a for loop in an each loopJquery 在每个循环的 for 循环中使用 $this
【发布时间】：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); 绑定它

标签： javascript jquery css each

【解决方案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');
}

【讨论】：