Question

我有一个简单的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);
});

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;
}

Answer 1

在$(this)之外分配setTimeout()，然后通过引用将变量传递给超时函数：

Example Here

$('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);
});

Answer 2

问题是在setInterval内部，this通常指向全局对象（窗口），而不是点击处理程序中的DOM元素。您有两种选择：

将this存储为单独的变量，并使用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);
});

绑定您的setInterval处理程序，以便您不会在匿名函数中丢失this

$('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);
});

Answer 3

这将解决您的问题，以这种方式更改您的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);
});

Answer 4

作为替代方案，既然您有答案，那就是使用event对象作为eventHandler的arguments传递（onclick，onchange，...）

$('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);
});

Jquery：单击时使用SetInterval

4 个答案: