Question

这是我的基本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（）中。我点击任意图片即可调用此功能。然而，它不起作用：图像被隐藏，但是＆＃34;显示：块＆＃34;不适用于任何图像。我通过使用devtools推断我的问题是$（this）。变量图像不确定。如果我将$（this）更改为$（＆＃39; .portfolio-img＆＃39;），它会在每个.portfolio-img-container中选择每个.portfolio-img，这不是我想要的。任何人都可以建议一种方法只选择当前.portfolio-img-container中的portfolio-imgs？

谢谢！

Answer 1

this中的{p> cycleImages是全局对象（我假设您没有使用严格模式），因为您调用它的方式。

可能最好将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，就像关闭变量的其他函数一样。

Answer 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

2 个答案: