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设置为循环的最高值,但我应该是创建时得到的确切值.所以第一个div应该设置为1,第二个div应该设置为2,依此类推.我希望你能理解我的问题并帮助我找到解决方案.

Answer 1

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

该for循环完成任何的DIV的被点击之前,这样i等于从环路的所有点击处理终值,并因此所有的ids的设置为相同的值.

使用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闭包:

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));
}