javascript - 使用 for 循环变量更改 html 类的名称

Question

我有几个 html 类在类名中递增，例如:

<div class="chicken1">
    <b></b>
</div>
<div class="chicken2">
    <b></b>
</div>
<div class="chicken3">
    <b></b>
</div>

我正在尝试编写一个 for 循环，它将遍历这些类名，将索引添加到每个类名的末尾，然后在 2 秒延迟内调用一个函数。

for ( var i = 1; i <= 3; i++ ) {
    setTimeout(function() {
        myFunction(".chicken" + i + " b");
    }, 2000 * i);
}

但是这不起作用。

Fiddle

Answer 1

问题实际上是在循环中调用的setTimeout()；要正确执行此操作，您必须关闭循环变量:

for (var i = 1; i <= 6; ++i) {
    setTimeout((function(i) {
        return function() {
            myFunction(".chicken" + i + " i");
        };
    })(i), i * 2000);
}

Demo

它使用一个立即调用的函数，传递i的值；此值一直保留到 setTimeout() 被触发。