странная проблема с JavaScript

Question

Я динамически вставляю html в документ (используя obj.innerHTML + = 'some html'). В этом html есть изображения с идентификаторами 'imageId_X' (т.е. imageId_1, imageId_2 ...). Это отлично работает, но что-то не так с кодом:

    for (var n = 0; n < pConfig.images.length; n++)
    {
        document.getElementById('imageId_' + n).onclick = function()
        {
            alert(n);
        }
    }

В pConfig.images есть 4 элемента, и alert (n) всегда оповещает 4. Почему это происходит, что я делаю неправильно?

Answer 1

Причиной вашей проблемы является выражение lamba в вашем коде. Когда вы определяете свою анонимную функцию как обработчик onclick, вы привязываете ее к внешней переменной n, которая в конце цикла всегда равна 4, поэтому вы получаете ее всегда 4. Чтобы сделать это так, как вы запланировали, вам нужно сделать следующее:

for (var n = 0; n < pConfig.images.length; n++)
{
    function( n) {
      document.getElementById('imageId_' + n).onclick = function()
      {
        alert(n);
      }
    }( n);
}

Следовательно, вы определяете отдельную область видимости для переменной.

Answer 2

Похоже, вам нужно закрытие. См. Как работают закрытия JavaScript?

Answer 3

Проблема в том, что каждая создаваемая вами функция имеет ссылку на одну и ту же переменную n - ту, которая увеличивается.К концу цикла он равен 4 - и все сделанные вами функции ссылаются на эту переменную с этим значением.

Вы можете обойти это с помощью замыкания, например:

function closure(n) {
  return function() {alert(n);}
}

for (var n = 0; n < pConfig.images.length; n++)
{
    document.getElementById('imageId_' + n).onclick = closure(n);
}