为什么JavaScript闭包会导致按钮点击事件输出相同索引值？

点击按钮隐藏对应序号li的问题与解决

在html中，定义一个带6个lis的ul列表，并给每个li设置不同颜色的背景。此外，还定义了6个按钮，每个按钮对应一个特定的背景色。

在javascript中，获取所有按钮和lis的引用，并为每个按钮添加一个点击事件监听器。在点击事件处理程序中，遍历lis，并在每次迭代中打印i（按钮的索引）。最后，隐藏所有lis，并显示与点击的按钮索引相对应的li。

然而，在代码中，当点击任意按钮时，控制台都会输出6，这是由于闭包导致的。在按钮的点击处理程序中，i的变量作用域是整个处理程序，因此在每次点击时都会输出最后一次迭代的值。

为了解决这个问题，可以使用箭头函数或立即执行函数(iife)来创建一个新的作用域。以下是使用箭头函数修改后的代码：

for (var i = 0; i < oInput.length; i++) {
  oInput[i].index = i;
  oInput[i].onclick = () => {
    for (var j = 0; j < oLi.length; j++) {
      console.log(i);
      oLi[j].style.display = "block";
    }
    oLi[this.index].style.display = "none";
  };
}

通过使用箭头函数，事件处理程序中的i有了自己的作用域，并在每次点击时正确输出对应的索引。

以上就是为什么JavaScript闭包会导致按钮点击事件输出相同索引值？的详细内容，更多请关注其它相关文章！