Question

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

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

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

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的值; <{1}}被触发后，此值将保留。

Answer 2

你正在使用jquery吗？尝试

for ( var i = 1; i <= 3; i++ ) {
    myFunction($(".chicken" + i + " b"));
}

在jquery中，要选择元素，类等，我们需要$("<selector here>");

Answer 3

这对我来说很好用：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>

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


<script>
    $( document ).ready(function() {
        for ( var i = 1; i <= 3; i++ ) {
            $(".chicken"+i+" b").html("Hey " + i);
        }
    });
</script>

</body>
</html>

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

3 个答案: