Как динамически определять обработчики событий JavaScript с помощью функции

Question

Я немного новичок в Javascript и не могу понять, что именно происходит с моими функциями.

Справочная информация: мой сценарий должен позволять вам назначать класс «toggler» или «toggled» элементу, чтобы они автоматически связывались, поэтому проверка / снятие флажка с переключателя покажет / скрыт переключение (язнаю, что есть много библиотек, которые могут сделать это, но, к сожалению, я не могу использовать их в этом случае)

Сценарий выполняется при загрузке страницы и ищет элементы с классом "toggler", а затем назначает его по щелчку мыши.обработчик соответственно.Вот фрагмент кода, с которым у меня возникают проблемы:

  function makeToggle () {
    for (i=0;i<toggler.length;i++) { 
      toggler[i].onclick=function(){toggleSection(this,i)};
    }
  }

  function toggleSection(obj,index) {
    if (obj.checked==true) {
      toggled[index].style.display="inline-block";
    } else {
      toggled[index].style.display="none";
    }
  }

«This» передается корректно и разрешается в любом флажке, к которому он применяется, но «index» всегда устанавливается равным длине массива-переключателявместо того, чтобы увеличиваться.Например, первое и второе нажатие переключателей должно быть:

onclick="toggleSection(this,0)"
onclick="toggleSection(this,1)"

Для чего они фактически установлены (при условии, что у меня есть 5 элементов, определенных как переключатели):

onclick="toggleSection(this,5)"
onclick="toggleSection(this,5)"

Из того, что я прочитал, я думаю, что это проблема с областью видимости, или способ, которым я вызываю функцию, но ничего, что я нашел, не имеет большого смысла

Answer 1

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

поэтому вы должны передать переменную ( i ) в качестве параметра для функции onclick,

попробуй так,

function makeToggle () {
    for (i=0;i<toggler.length;i++) { 
      toggler[i].addEventListener("click", (function(d) { return function(){ 
                    toggleSection(this,d);
      }; })(i), true);
    }
}

или в вашем стиле,

function makeToggle () {
    for (i=0;i<toggler.length;i++) { 
       toggler[i].onclick = (function(d) { return function(){toggleSection(this,d)}})(i);
    }
}

Answer 2

Вы видите проблему, подробно описанную в этом сообщении в блоге .

Причина этого довольно сложна.Анонимные функции, которые мы определяем как обработчики событий, «наследуют» переменную i из области видимости attachEventsToListItems, а не для цикла for.Однако к моменту выполнения обработчиков событий цикл for завершил свои итерации, и значение i в этой функции стало равным 4. Проблема в том, что функции, которые мы определяем как обработчики событий, не создают новую область видимостидля меня, пока они не будут выполнены.

Чтобы решить проблему, вам нужно закрытие:

for (i=0;i<toggler.length;i++) { 
    toggler[i].onclick= (function (index) {
        return function() {
            toggleSection(this,index);
        };
    }) (i);
}

Вы можете увидеть это в актере здесь: http://jsfiddle.net/Vb2t2/