назначение переменных слушателям событий DOM при итерации

Question

Я думаю, что есть некоторые базовые вещи, которые мне здесь не хватает;

for (var i=1; i<=5; i++) {
  var o = $('#asd'+i);

  o.mouseover(function() {
    console.info(i);
  });
}

При наведении курсора на пять различных элементов я всегда получаю последнее значение из итерации; значение 5. Мне нужны разные значения в зависимости от того, какой элемент я нахожу, все от 1 до 5.

Что я здесь не так делаю?

Answer 1

Вам нужно замыкание, поскольку все функции наведения мыши ссылаются на одну и ту же переменную, значение которой меняется:

for (var i=1; i<=5; i++) {
    (function(j) {
        $('#asd'+j).mouseover(function() {
            console.info(j);
        });
    })(i);
}

При создании замыкания переменная j находится внутри локальной области действия функции и не изменится при изменении «внешнего» * ​​1005 *.

Answer 2

В этом случае i связывается внутри замыкания на каждой итерации, что означает, что все функции, добавленные к объектам, указывают на одинаковую переменную, и, поскольку эта переменная была увеличена на каждой итерации, все функции см. последнее увеличенное значение.

Чтобы избежать этого, скопируйте значение в новую переменную внутри замыкания

for (var i=1; i<=5; i++) {
     var o = $('#asd'+i);
    (function(newi) {
        o.mouseover(function() {
            console.info(newi);
        });
    }(i);
}

Answer 3

Вам нужно заключить вызовы функций в большее количество замыканий:

См. Это: https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures#Creating_closures_in_loops.3a_A_common_mistake

Я думаю, что это должно работать:

for (var i=1; i<=5; i++) {
  var o = $('#asd'+i);
  (function(j){
    o.mouseover(function(){
      console.info(j);
    });
  })(i);
}