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等于循环中所有单击处理程序的最终值，因此所有{{1} s设置为相同的值。

使用jQuery，您可以使用id存储来解决此问题：

.data()

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

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

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){
  $('<div class="overviewbit"></div>').appendTo('.overview')
  .click(function(){
    id = i;
  });
});

Answer 4

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

循环，创建和附加div。
循环完成 - 我被设置为最高值。
发生点击事件。在这一点上，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's each method。

Answer 5

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

jQuery for循环动态值

5 个答案: