Можете ли вы присоединить функцию-обработчик с аргументами к событию onclick для ряда элементов в цикле?

Question

Я пытаюсь установить событие onclick для миниатюр, которые динамически заполняются из базы данных. Мне нужно установить функцию для обработки аргумента, который является идентификатором большей картинки, которую представляет миниатюра. код, который у меня есть, теперь устанавливает все эскизы так, чтобы они указывали на # 18. Если вы видите в цикле for, он должен умереть в 17 *. 1001 *

for (var i = 0; i < 18; i++) {
    document.getElementById('tat' + i).onclick = function() { display(i); }; 
}

(мои миниатюры <img /> все имеют id="tat0", id="tat1", id="tat2", id="tat3" и т. Д.) (display() загружает большую картинку, которую миниатюра представляет в отдельный элемент)

Каждая миниатюра получает эту функцию onclick, так что я знаю, что цикл for правильно обращается к каждому по его идентификатору (шаг за шагом для каждого i), так почему все display(i) назначены на 18? Можете ли вы назначить функцию onclick для обработки параметров?

Answer 1

Вам нужна функция закрытия для генерации ваших обработчиков.

function genHandler( param ) {
  return function() {
     // use all params in here
     display( param );
  }
}

, а затем назначьте ваши события аналогично

for (var i = 0; i < 18; i++) {
  document.getElementById('tat' + i).onclick = genHandler( i );
}

Answer 2

Завершение вашего обработчика onclick в функцию создаст замыкание, которое несет с собой текущую область.

for (var i = 0; i < 18; i++) {
    document.getElementById('tat' + i).onclick = (function(a) {
        return (function() {
            display(a);
        });
    })(i);
}​

Answer 3

Это также может сработать, если вы просто добавите 'i' в качестве параметра к своей функции.