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

发布日期： 2024-11-07 阅读量： 作者： 网络

为什么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";
  };
}

# 作用域 # 点击事件

上一篇: PHP函数面试必备知识点，阐述错误处理函数的异常捕获

下一篇: 深入探讨Docker内核的具体使用方法

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

随便看看