Question

我正在尝试创建一个JS / Jquery函数来处理同一页面上的多个图像滑块。

这是我的代码：

var imageSlider = $('.imageSlider');

imageSlider.each(function(){
    var imageBackground = $(this).find('.imageBackground');
    var imageBackgroundFirst = $(this).find('.imageBackground:first');
    var imageBackgroundLast = $(this).find('.imageBackground:last');

    imageBackground.addClass('off');
    imageBackgroundFirst.removeClass('off').addClass('on');

    setInterval(function(){
        var imageBackgroundOn = $(this).find('.imageBackground.on');

        if (imageBackgroundLast.hasClass('on')){
            imageBackgroundLast.removeClass('on').addClass('off');
            imageBackgroundFirst.addClass('on').removeClass('off');
        }
        else{
            imageBackgroundOn.removeClass('on').addClass('off');
            imageBackgroundOn.next().addClass('on').removeClass('off');
        }

    }, 7500);
})

问题是setBackgroundOn变量里面的set interval元素返回未定义的上下文... 我知道setInterval在自己的上下文中处理变量，那么如何将setInterval行链接到每个imageSlider元素独立工作？我需要在每个时间间隔和自己的上下文中刷新该变量。

提前致谢！

Answer 1

我会使用Function.prototype.bind方法：

setInterval(function(){
    var imageBackgroundOn = $(this).find('.imageBackground.on');

    if (imageBackgroundLast.hasClass('on')){
        imageBackgroundLast.removeClass('on').addClass('off');
        imageBackgroundFirst.addClass('on').removeClass('off');
    }
    else{
        imageBackgroundOn.removeClass('on').addClass('off');
        imageBackgroundOn.next().addClass('on').removeClass('off');
    }

}.bind(this), 7500);

IE8不支持ES5方法，因此您可以使用$.proxy：

setInterval($.proxy(function() {
    // ...
}, this), 7500);

或者只是使用引用来纠正上下文：

var self = this;
setInterval(function() {
    var imageBackgroundOn = $(self).find('.imageBackground.on');
    // ...
}, 7500);

Answer 2

我建议在变量中缓存$（this）。这样你在setInterval解决时也会遇到未定义上下文的问题。像这样：

var imageSlider = $('.imageSlider');

imageSlider.each(function(){
    var $this = $(this);
    var imageBackground = $this.find('.imageBackground');
    var imageBackgroundFirst = $this.find('.imageBackground:first');
    var imageBackgroundLast = $this.find('.imageBackground:last');

    imageBackground.addClass('off');
    imageBackgroundFirst.removeClass('off').addClass('on');

    setInterval(function(){
        var imageBackgroundOn = $this.find('.imageBackground.on');

        if (imageBackgroundLast.hasClass('on')){
            imageBackgroundLast.removeClass('on').addClass('off');
            imageBackgroundFirst.addClass('on').removeClass('off');
        }
        else{
            imageBackgroundOn.removeClass('on').addClass('off');
            imageBackgroundOn.next().addClass('on').removeClass('off');
        }

    }, 7500);
})

在setInterval中获取正确的上下文

2 个答案: