javascript - 卡住添加到事件监听器函数的变量

This question already has answers here:

JavaScript closure inside loops – simple practical example
                                
                                    （44个答案）
                                
                        
                                8天前关闭。
            
                    
我有几个添加了事件侦听器的元素，因此我可以捕获事件数据。效果很好，但我需要每个人都有一个唯一的ID。如果您查看下面的代码段，则可以看到ID总是最后一个值。

var buttons = document.getElementsByClassName('class');

for (var i = 0; i < buttons.length; i++) {
  var id = i + 1;

  buttons[i].onclick = function() {
    buttonClicked(id);
  }
}

function buttonClicked(id) {
  document.getElementById('output').innerHTML = 'Button ID: ' + id;
}

<button class="class">Button 1</button>
<button class="class">Button 2</button>

<hr>

<div id="output"></div>

我知道您可以将onclick事件放入HTML中，但是我需要事件数据。它也需要像我一样将onclick作为function()输入。有什么方法可以冻结函数的id变量值吗？

最佳答案

这是因为循环变量i和id变量的闭合。将声明的变量更改为let i = 0和let id = i + 1，以便在每次循环迭代时为其创建唯一的作用域。

var buttons = document.getElementsByClassName('class');

for (let i = 0; i < buttons.length; i++) {
  let id = i + 1;

  buttons[i].onclick = function() {
    buttonClicked(id);
  }
}

function buttonClicked(id) {
  document.getElementById('output').innerHTML = 'Button ID: ' + id;
}

<button class="class">Button 1</button>
<button class="class">Button 2</button>

<hr>

<div id="output"></div>

关于javascript - 卡住添加到事件监听器函数的变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59515249/