назначение переменных для прослушивателей событий 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 внутри локальной области видимости функции и будет не изменяется при изменении «внешнего» i.

Answer 2

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

относятся к этому: 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); 
} 

Answer 3

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

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

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