104

我正在尝试使用 for 循环将事件侦听器添加到多个对象，但最终所有侦听器都针对同一对象 --> 最后一个。

如果我通过为每个实例定义 boxa 和 boxb 来手动添加侦听器，它就可以工作。我想这是 addEvent for-loop 没有按我希望的方式工作。也许我完全使用了错误的方法。

在容器 4 上使用 4 个 class="container" 触发器的示例按预期方式工作。在容器 4 上触发容器 1、2、3 触发事件，但前提是触发器已被激活。

// 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>

4

5 回答 5

153

关闭！:D

此固定代码按您的预期工作：

// 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) {
    (function () {
        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);
    }()); // immediate invocation
}
<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>

为什么要解决它？

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);
}

实际上是非严格的 JavaScript。它是这样解释的：

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

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

由于变量提升，var声明被移动到范围的顶部。由于 JavaScript 没有块作用域（for,等） if，while它们被移动到函数的顶部。更新：从 ES6 开始，您可以使用let来获取块范围的变量。

当您的代码运行时，会发生以下情况：在for循环中添加点击回调并分配boxa，但其值在下一次迭代中被覆盖。当 click 事件触发时，回调运行，并且 的值boxa始终是列表中的最后一个元素。

使用闭包（关闭 的值boxa等boxb）将值绑定到单击处理程序的范围。

JSLint或JSHint等代码分析工具将能够捕获这样的可疑代码。如果您正在编写大量代码，那么花时间学习如何使用这些工具是值得的。一些 IDE 内置了它们。

于 2013-10-25T09:34:43.137 回答
15

您面临范围/关闭问题，因为function(){makeItHappen(boxa,boxb);} boxa和boxb引用然后总是最后一个元素。

要解决问题：

function makeItHappenDelegate(a, b) {
  return function(){
      makeItHappen(a, b)
  }
}

// ...
 elem[i].addEventListener("click", makeItHappenDelegate(boxa,boxb), false);
于 2013-10-25T09:37:49.107 回答
14

你可以使用函数绑定。你不需要使用闭包。见下文：

之前：

function addEvents(){
   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);
   }
}

之后：

function addEvents(){
   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", makeItHappen.bind(this, boxa, boxb), false);
      elem[k].addEventListener("click", makeItHappen.bind(this, boxa, boxb), false);
   }
}
于 2016-08-09T20:47:38.877 回答
2

这是因为关闭。

看看这个：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake

示例代码和您的代码本质上是相同的，对于那些不知道“闭包”的人来说，这是一个常见的错误。

简单来说，当你在 内部创建一个处理函数时addEvents()，它不仅会i从addEvents()'s 环境中访问变量，还会“记住” i。

而且因为您的处理程序“记住” i，所以变量在执行i后不会消失。addEvents()

因此，当调用处理程序时，它将使用变量，i但在 for 循环之后，变量i现在是 3。

于 2016-06-24T15:43:01.363 回答
1

我前段时间也遇到过这个问题。我通过在循环外使用“添加”函数来分配事件来解决它，并且效果很好。

你的脚本应该是这样的。

function addEvents(){
  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;

//- edit ---------------------------|
    adds(boxa, boxb);
  }
}
//- adds function ----|
function adds(obj1, obj2){
  obj1.addEventListener("click", function(){makeItHappen(obj1, obj2);}, false);
  obj2.addEventListener("click", function(){makeItHappen(obj1, obj2);}, false);
}
//- end edit -----------------------|

function makeItHappen(elem, elem2){
  var el = document.getElementById(elem);
  el.style.transform = "flip it";
  var el2 = document.getElementById(elem2);
  el2.style.transform = "flip it";
}

于 2016-01-10T01:52:18.700 回答