JS 循环li添加点击事件 （闭包的应用）

JS循环li添加点击事件，解读闭包的应用，值得你参考借鉴！

今天，我们将通过一段具体的代码示例，来深入如何在JavaScript中为li元素循环添加点击事件，同时展示闭包在这一过程中的关键作用。

我们从获取页面上的所有li元素开始。假设这些元素都带有'.article-tab li'这个类名，我们可以通过以下代码获取到它们：

```javascript

var aLi = document.querySelectorAll('.article-tab li');

```

接下来，我们通过一个for循环为每一个li元素添加点击事件。在这个过程中，我们将使用闭包来保存循环中的索引值。闭包是一种特殊类型的函数，它记住了定义它的作用域中的变量。在这个例子中，我们使用闭包来保存当前的索引i。下面是具体的代码实现：

```javascript

for (var i = 0; i < aLi.length; i++) {

(function(p){ // 创建闭包来保存索引值i

aLi[p].onclick = function() {

alert(p); // 当点击li元素时，弹出保存的索引值

}

})(i); // 立即执行函数，并将当前索引值i传入闭包函数内保存

}

```

以上代码中，我们在立即执行的函数表达式中创建了一个闭包，用来保存当前的索引值i。这是因为JavaScript的作用域问题，如果在循环中直接为li元素添加点击事件，可能会遇到所有li元素点击时弹出的都是最后一个索引值的问题。通过闭包，我们可以为每个li元素保存一个独立的索引值，确保点击时能够正确地弹出对应的索引。

这段代码展示了如何在JavaScript中使用闭包来为循环中的每个元素添加事件处理函数，特别是当这些元素需要处理的数据与其在循环中的位置有关时。希望这个例子能帮助你更好地理解闭包的应用。如果你有任何疑问，欢迎给我留言，我会及时回复。这就是今天的分享，感谢阅读！