jQuery for循环动态值

我遇到了以下循环的问题：

for (var i = 0; i < dataElements; ++i){ d=document.createElement('div'); $(d).addClass('overviewbit') .appendTo('.overview') .click(function(){ id = i; }); } 

每个Div都将id设置为循环的最高值，但我应该是创建时得到的确切值。 所以第一个div应该设置为1，第二个div应该设置为2，依此类推。 我希望你能理解我的问题并帮助我找到解决方案。

Answer 1

这是一个常见的问题。 当你创建click处理程序时，它将id设置为i – 变量，而不是i当时存储的值。

for循环在单击任何DIV之前完成，因此i等于循环中所有单击处理程序的最终值，因此所有id都设置为相同的值。

使用jQuery，您可以使用.data()存储来解决此问题：

 for (var i=0; i 

但是，要以“正确”的方式执行操作，您将使用JavaScript闭包 ：

 for (var i=0; i 

Answer 2

我不太明白你在问什么，这样做你想做什么

 for (var i = 0; i < dataElements; ++i){ d=document.createElement('div'); $(d).addClass('overviewbit') .appendTo('.overview') .data("id", i) .click(function(){ id = $(this).data("id"); }); } 

Answer 3

你可以改用它，

 $.each(dataElements, function(i, el){ $('
').appendTo('.overview') .click(function(){ id = i; }); }); 

Answer 4

这是因为当你的点击function发生时，循环已经完成。 jQuery看到它的顺序是：

1. 循环，创建和附加div。

2. 循环完成 – 我被设置为最高值。

3. 发生单击事件。 在这一点上，jQuery设置id = i。 但由于循环首先完成，我是最高价值。

要解决这个问题，你需要将i设置为for循环中的局部变量（查看javascript闭包）：

 for (var i = 0; i < dataElements; ++i){ d=document.createElement('div'); var myId = i; $(d).addClass('overviewbit') .appendTo('.overview') .click(function(){ id = myId; }); } 

您可能还想查看jQuery的每种方法 。

Answer 5

您遇到的问题是，在您实际单击该元素之前，不会对点击函数进行评估。 这个事件可能会在for循环结束后发生。 这意味着我将永远是dataElements.length，因为在评估点击时，i已被设置为最高索引，并将在其余生中保持这种方式。