Проблема закрытия Javascript

Question

Я знаю, что такой вопрос часто задают, но я до сих пор не смог найти способ правильно выполнить эту работу.

Код:

function doStuff () {
     for (var i = 0; i< elementsList.length; i++) {
        elementsList[i].previousSibling.lastChild.addEventListener("click", function(){
                   toggle(elementsList[i])}, false);


        }
    } // ends function


    function toggle (element) {
        alert (element);
    }

Проблема в передаче переменных в функцию переключения.Он работает с ключевым словом this (но отправляет ссылку на выбранный элемент, который в данном случае бесполезен), но не с elementsList [i], который оповещает как неопределенный в Firefox.

Как я понял,использование анонимных функций для вызова функции достаточно для решения проблем закрытия, так что я пропустил?

Answer 1

Попробуйте:

function startOfFunction() {
    for (var i = 0; i< elementsList.length; i++) {
        elementsList[i].previousSibling.lastChild.addEventListener(
            "click",
            (function(el){return function(){toggle(el);};})(elementsList[i]),
            false
        );

    }
} // ends function


function toggle (element) {
    alert (element);
}

Answer 2

В качестве объяснения: анонимная функция, которую вы используете в цикле for, ссылается на переменную «i», чтобы заставить элемент переключаться.Поскольку анонимные функции используют «живое» значение переменной, когда кто-то щелкает элемент, «i» всегда будет elementsList.length + 1.

Пример кода из Matt решает эту проблему, вставляя i в другойфункция, в которой он «зациклен».Это всегда верно:

Если вы перебираете элементы, присоединяющие события, не используйте простые анонимные функции, когда они облажаются, а скорее создайте новую функцию для каждого элемента.Более читаемая версия ответа Мэтта будет:

function iterate () {
    for (var i = 0; i < list.length; i++) {
        // In here, i changes, so list[i] changes all the time, too. Pass it on!
        list[i].addEventListener(createEventFunction(list[i]);
    }
 }

 function createEventFunction (item) {
     // In here, item is fixed as it is passed as a function parameter.
     return function (event) {
         alert(item);
     };
 }

Answer 3

Проблема в том, что вы хотите использовать var i!i доступно в событии onClick, (с момента закрытия и прочее).Поскольку у вас есть цикл, i считается.Теперь, если вы щелкнете по любому из элементов, i всегда будет elementsList.length (поскольку все функции событий обращаются к одному и тому же i)!

с использованием решения Мэтта будет работать.

Answer 4

Попробуйте:

function doStuff () {
    for (var i = 0; i< elementsList.length; i++) {
        (function(x) {
            elementsList[x].previousSibling.lastChild.addEventListener("click", function(){
               toggle(elementsList[x])}, false);
        })(i);



    }
} // ends function

Я думаю, что это может быть проблема с передачей elementsList[i], поэтому приведенный выше код имеет закрытие, которое должно помочь.