javascript - for循环中的jquery迭代器

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 5 年前。

我是 JavaScript 和 jQuery 新手。我发现了一个我自己无法解决的问题。

for (i = 0; i < 12; i++)
{
    $("#c" + i).on("click", function () { alert(i) });
}

它使用alert(12)而不是alert(i)将事件附加到id从c0到c11的每个元素...

另一方面

$("#c0").on("click", function () { alert(0) });
$("#c1").on("click", function () { alert(1) });
$("#c2").on("click", function () { alert(2) });
...

效果很好。是不是一样？

Answer 1

这是因为 var 关键字的工作方式，也是因为

$("#c" + i).on("click", function () { alert(i) });`

本质上是异步的。

只需这样做即可，

快速修复

for (let i = 0; i < 12; i++)
 {
   $("#c" + i).on("click", function () { alert(i) });
 }

解释:您的代码不起作用，因为 $('#c').on('click', fun) 本质上是异步的，这意味着这个函数 function () {alert(i) } 将稍后执行，当发生时，您的 for 循环将以 i = 12 的值完成，因此，您将得到 12 作为所有处理程序的值。

现在的问题是如何添加 let 解决这个问题？

答案很简单，Let 遵循 block 作用域，而 var 或 no var (global) 则不是 block 作用域。 var 具有函数作用域，要使用 var 实现相同的作用，您需要执行类似的操作。

for(var i = 0; i < 12; i++) {
  (function(i) {
    $("#c" + i).on("click", function () { alert(i) });
  })(i);
}