javascript - 如何在循环中添加带有局部变量的eventHandlers

我敢肯定我曾经知道这一点，但是我已经离开了一段时间了，我再也无法解决了。

假设我有一个按钮集合（“按钮A”，“按钮B”，“按钮C”，由.getElementsByClassName（“ button”）检索到的NodeList表示）。

现在，我想向其中添加一个EventHandler，以利用在创建处理程序时按值传递的一些局部变量。举一个最小的例子，让我们使用：

for (var i = elems.length - 1; i >= 0; i--) {
    var inner = elems[i].innerHTML;
    elems[i].onclick = function(){window.alert("Clicked on "+inner+" which is element number "+i)};
}

这里的预期结果是，当单击按钮B时，我得到

Clicked on Button B which is element number 1

但是，所有按钮都会产生

Clicked on Button A which is element number -1

我知道为什么会发生这种情况，但是我该如何更改代码以实现前者呢？如果这是相关的，则在最终的事件处理程序中，i不会单独使用，而是再次引用elem [i]，并将其作为参数传递给处理程序。

最佳答案

使用let声明变量。这将为变量创建一个块作用域，并在整个循环中保留正确的值：

for (let i = elems.length - 1; i >= 0; i--) {

演示：

let elems = document.querySelectorAll('button');
for (let i = elems.length - 1; i >= 0; i--) {
  var inner = elems[i].innerHTML;
  elems[i].onclick = function(){window.alert("Clicked on "+inner+" which is element number "+i)};
}

<button type="button">Button A</button>
<button type="button">Button B</button>
<button type="button">Button C</button>

关于javascript - 如何在循环中添加带有局部变量的eventHandlers，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57787994/