点击按钮隐藏对应序号li的问题与解决
在html中，定义一个带6个lis的ul列表，并给每个li设置不同颜色的背景。此外，还定义了6个按钮，每个按钮对应一个特定的背景色。
在javascript中，获取所有按钮和lis的引用，并为每个按钮添加一个点击事件监听器。在点击事件处理程序中，遍历lis，并在每次迭代中打印i（按钮的索引）。最后，隐藏所有lis，并显示与点击的按钮索引相对应的li。
然而，在代码中，当点击任意按钮时，控制台都会输出6，这是由于闭包导致的。在按钮的点击处理程序中，i的变量作用域是整个处理程序，因此在每次点击时都会输出最后一次迭代的值。
立即学习“Java免费学习笔记（深入）”；
为了解决这个问题，可以使用箭头函数或立即执行函数(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闭包会导致按钮点击事件输出相同索引值？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
724
