addEventListener usando o loop for e passando valores [duplicado]

Question

Oct 25, 2013, 11:32 AM

addEventListener usando o loop for e passando valores [duplicado]

Esta pergunta já tem uma resposta aqui:

JavaScript encerramento dentro de loops - exemplo prático simples 39 respostas

Estou tentando adicionar o ouvinte de eventos a vários objetos usando um loop for, mas acabo com todos os ouvintes direcionados para o mesmo objeto -> o últim

Se eu adicionar os ouvintes manualmente, definindo boxa e boxb para cada instância, ele funcionará. Eu acho que é o loop for addEvent que não está funcionando da maneira que eu esperava. Talvez eu use completamente a abordagem errada.

Exemplo usando 4 da classe = "container" O gatilho no container 4 funciona da maneira que deveria. Acionar no evento de acionamento do contêiner 1,2,3 no contêiner 4, mas apenas se o acionador já tiver sido ativad

// Function to run on click:
function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";
}

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
  var k = i + 1;
  var boxa = elem[i].parentNode.id;
  var boxb = elem[k].parentNode.id;

  elem[i].addEventListener("click", function() {
    makeItHappen(boxa, boxb);
  }, false);
  elem[k].addEventListener("click", function() {
    makeItHappen(boxb, boxa);
  }, false);
}

<div class="container">
  <div class="one" id="box1">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box2">
    <p class="triggerClass">some text</p>
  </div>
</div>

<div class="container">
  <div class="one" id="box3">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box4">
    <p class="triggerClass">some text</p>
  </div>
</div>