javascript - 使用 for 循环向多个元素添加事件监听器并传递不同的参数

Question

<div id="mydiv0"></div>
<div id="mydiv1"></div>
<div id="mydiv2"></div>


var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(var i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", function(){myFunction(i);});
}

我想将事件监听器附加到 myArray 中的每个元素。单击时，应显示一条警告消息，分别显示 mydiv0、mydiv1 和 mydiv2 的数字 0,1 和 2。我尝试使用 for 循环，如上例所示，但无论我点击哪个 div，我都会收到“我的号码是 3”的消息。有没有办法将变量 i 的不同值作为 myFunction 的参数传递？

Answer 1

您可以简单地在循环中用 let 声明变量而不是创建 block 作用域局部变量的 var。

var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(let i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", function(){myFunction(i);});
}

<div id="mydiv0">Div 0</div>
<div id="mydiv1">Div 1</div>
<div id="mydiv2">Div 2</div>