Javascript Jquery：单击时使用SetInterval

我有一个简单的javascript jquery代码：

我原以为它会奏效，但事实并非如此！我没有收到任何错误或任何东西，有人知道为什么吗

var colors = ['red','green','blue'];

$('button').on('click',function(){
    var index = $(this).parent().index();
    setInterval(function(){
        $(this).parent().css('background',colors[index]);
        index < 3 ? index++ : index = 0;
    }, 1000);
});

var colors=[‘红色’、‘绿色’、‘蓝色’]；
$（'button'）。在（'click'，function（）上{
var index=$（this.parent（）.index（）；
setInterval（函数（）{
$（this.parent（）.css（'background'，colors[index]）；
指数<3？指数++：指数=0；
}, 1000);
});

html代码

   <div class="titleBox">
       <button>Click meh!</button>
   </div>
   <div class="titleBox">
      <button>Click meh!</button>
   </div>
   <div class="titleBox">
       <button>Click meh!</button>
   </div>

.titleBox {
    width:200px;
    height:200px;
    float:left;
    border:1px solid;
    opacity:.5
}
.titleBox[style^="background"] {
    opacity:1;
}

点击我！
点击我！
点击我！
.标题栏{
宽度：200px；
高度：200px；
浮动：左；
边框：1px实心；
不透明度：.5
}
.titleBox[style^=“background”]{
不透明度：1；
}

将

$（此）

分配到

setTimeout（）之外的
，
，然后通过引用将变量传递到超时函数：


$（'button'）。在（'click'，function（）上{
var self=$（这是）；
var index=$（this.parent（）.index（）；
setInterval（函数（）{
self.parent（）.css（'background'，colors[index]）；
指数<3？指数++：指数=0；
}, 1000);
});
这将解决您的问题，通过以下方式更改您的js：

$('button').on('click',function(){
    var index = $(this).parent().index();
    var $el = $(this);
    setInterval(function(){
        $el.parent().css('background',colors[index]);
        index < 3 ? index++ : index = 0;
    }, 1000);
});

$（'button'）。在（'click'，function（）上{
var index=$（this.parent（）.index（）；
var$el=$（本）；
setInterval（函数（）{
$el.parent（）.css（'background'，colors[index]）；
指数<3？指数++：指数=0；
}, 1000);
});
问题在于，在
setInterval
的内部，
此
通常指向全局对象（窗口），而不是单击处理程序中的DOM元素。您有两个选择：

将
此
存储为一个单独的变量并使用
setInterval
匿名函数中的变量

$('button').on('click',function(){
    var self = $(this);
    var index = $(this).parent().index();
    setInterval(function(){
        self.parent().css('background',colors[index]);
        index < 3 ? index++ : index = 0;
    }, 1000);
});

$('button').on('click',function(){
    var index = $(this).parent().index();
    setInterval(function(){
        $(this).parent().css('background',colors[index]);
        index < 3 ? index++ : index = 0;
    }.bind(this), 1000);
});

另一种选择是，既然您已经有了答案，那么可以使用作为eventHandler的
参数传递的
事件
对象（onclick，onchange，…）

$（'button'）。在（'click'，功能（ev）{
var index=$（this.parent（）.index（）；
setInterval（函数（）{
$（ev.currentTarget）.parent（）.css（'background'，colors[index]）；
指数<3？指数++：指数=0；
}, 1000);
});

现在我注意到你重复了一些东西，所以也许你可以这样做：

$('button').on('click',function(){
    var parent = $(this).parent(),
        index = parent.index();

    setInterval(function(){
        parent.css('background',colors[index]);
        index < 3 ? index += 1 : index = 0;
    }, 1000);
});

$（'button'）。在（'click'，function（）上{
var parent=$（this）.parent（），
index=parent.index（）；
setInterval（函数（）{
css（'background'，colors[index]）；
指数<3？指数+=1：指数=0；
}, 1000);
});
因为
这个
是窗口范围。
这个
不是setInterval范围中的按钮。最好向OP解释一下
这个
变成了
setInterval
中的其他东西，在这种情况下，是全局对象。另一种修复方法是使用
函数。bind
@JuanMendes您的注释将解释它。但你的答案是1+。我不知道
.bind
。您也可以传递
事件
对象并使用
$（event.currentTarget）
。要兼容IE8，
bind（）
的另一种选择是jQuery的
$.proxy（）
，只要按钮没有任何子元素，它就可以工作。否则，这就是单击currentTarget时的内容
$('button').on('click',function(ev){
    var index = $(this).parent().index();
    setInterval(function(){
        $(ev.currentTarget).parent().css('background',colors[index]);
        index < 3 ? index++ : index = 0;
    }, 1000);
});

$('button').on('click',function(){
    var parent = $(this).parent(),
        index = parent.index();

    setInterval(function(){
        parent.css('background',colors[index]);
        index < 3 ? index += 1 : index = 0;
    }, 1000);
});