Question

我的目标是每100毫秒更改每个div的background-color。目前它只更改最后一个元素的背景，这是我目前的方法：

HTML

<nav>
    <div class="icon-a">1</div>
    <div class="icon-b">2</div>
    <div class="icon-c">3</div>
</nav>

的jQuery

var delay=100;
$('nav [class^=icon-]').each(function(counter){
    //counter will start from 0..
    timeout = delay * (counter + 1);
    selector = $(this);
    setTimeout(function(){
         selector.toggleClass('colorHigh');
    }, timeout);
});

这是DEMO ..

Answer 1

因为您要定义全局变量，请使用var关键字：

var selector = $(this);

Answer 2

您正在使用全局变量selector，因此您始终更改相同的变量。

var delay=100;
$('nav [class^=icon-]').each(function(counter){
    //counter will start from 0..
    var selector;
    timeout = delay * (counter + 1);
    selector = $(this);
    setTimeout(function(){
         selector.toggleClass('colorHigh');
    }, timeout);
});

对我来说，你的代码就像这样。

DEMO

循环中的setTimeout仅影响最后一个元素

2 个答案: