Question

我有一个简单的javascript，我想循环多个元素。这是我的代码：

<script type='text/javascript'>  
for(i = 1; i < 100; i++)
{
$('#link'+i).click(function() {
    $('#container').removeClass();
    $('#container').addClass('templateid'+i);
});
}
</script>

我想要实现的是多个id（例如link2，link3，link4）的相同addClass函数，以及相应的类（例如template2，template3，template4）。

非常感谢任何帮助！

作为参考，像这样的单个调用确实有效，所以我不明白为什么上面的循环不起作用：

<script type='text/javascript'> 
$('#link2').click(function() {
    $('#container').removeClass();
    $('#container').addClass('templateid2');
});
</script>

Answer 1

这里的问题是，点击处理程序i内的anonymous function是对循环i的引用，因此对于所有点击处理程序都是100循环结束后。

这是一个常见的“错误”，并且在循环的每次迭代中都需要i的副本才能正常工作。

function createHandler(i) {
    $('#link'+i).click(function(e) {
         $('#container').removeClass();
         $('#container').addClass('template'+i); // this 'i' won't change anymore
        e.preventDefault();                      // thus the code will add the correct class
        return false;
    });
}

for(var i = 0; i < 100; i++) {
    createHandler(i); // one could also create a closure here
}

请参阅：JavaScript Garden: Closures - Avoiding the Reference Problem。

Answer 2

也许你忘了将计数器与字符串分开

$('#link[' + i + ']').click(function() {
    $('#templateid').removeClass();
    $('#templateid').addClass('templateid[' + i + ']');

Answer 3

你正在使用原型吗？ $（'＃link'）应返回id =“link”的元素，[i]将其缩小到属性i。

如果你想使用循环中的变量i找到你的link2，link3，..试试：

$('#link' + i).click { ...

另外，你的循环似乎是无止境的。

帮助简单的JavaScript循环

3 个答案: