for循环中的jquery迭代器[重复]

Question

我是 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 循环将以 @ 的值完成987654326@ 因此，您将获得 12 作为所有处理程序的值。

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

答案很简单，Let 遵循块作用域，而 var 或 no var ( global ) 不是块作用域。 var 有一个功能范围，要实现与 var 相同的功能，您需要执行类似的操作。

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