jQuery for 循环动态值

Question

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

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

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

Answer 1

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

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

使用 jQuery，您可以通过使用 .data() 存储来解决这个问题:

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

但是，要以“正确”的方式做事，您可以使用 JavaScript closure :

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