JQuery для динамического значения цикла

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 равно окончательному значению из цикла для всех обработчиков щелчков, и в результате все 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 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));
}

Answer 2

Это потому, что когда происходит ваша функция щелчка, цикл уже завершен.JQuery видит его в следующем порядке:

1. Цикл, создание и добавление div.

2. Цикл выполнен - ​​я установлен намаксимальное значение.

3. Событие щелчка происходит.Именно в этот момент jQuery устанавливает id = i.Но поскольку цикл завершается первым, 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 3

Вы можете использовать это вместо

$.each(dataElements, function(i, el){
  $('<div class="overviewbit"></div>').appendTo('.overview')
  .click(function(){
    id = i;
  });
});

Answer 4

Я не совсем понимаю, о чем вы спрашиваете, делает ли это то, что вы хотите

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 5

Проблема, с которой вы столкнулись, заключается в том, что функция щелчка не оценивается до тех пор, пока вы фактически не щелкнете по этому элементу.Это событие, вероятно, произойдет после завершения цикла for.Это означает, что я всегда буду dataElements.length, так как к моменту оценки щелчка для i был установлен самый высокий индекс, и он останется таким до конца своей жизни.