JS遍历ul下li点击弹出索引的闭包实现
作者:异步漫步时间:2026-10-30 14:12:22浏览:165
本文介绍如何在JavaScript中遍历ul下的li元素并绑定点击事件以获取正确的索引。针对for循环直接绑定事件导致的索引错误问题,利用立即执行函数(IIFE)创建闭包,将当前索引i作为参数传入并保存至局部变量Index,确保每次点击时能访问到对应的独立作用域索引值。
HTML结构构建
首先构建所需的HTML结构。
<div >
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
事件绑定问题与解决方案
接下来遍历ul下的所有li元素并为其添加点击事件。通常做法是在for循环中直接绑定事件,但这样往往无法得到预期的结果,原因何在?
查看具体的JavaScript代码实现。
var li = document.getElementsByTagName('li');
for(var i = 0;i<li.length;i++){
(function(Index){
li[i].addEventListener('click',function(e){
alert('I am link #'+ Index );
},false);
})(i)
}
通过上述方法成功实现了功能。
这种方式能够确保点击对应的li时,返回正确的索引值。
闭包原理详解
简要说明实现原理。
(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的
这里使用了立即执行函数或自执行函数的写法。
本质上是利用闭包原理来获取索引。通过立即执行函数传入参数Index(即循环变量i),在函数内部形成闭包。
Index变量会一直保留在闭包的作用域块内。当点击事件触发时,调用作用域内保存的索引值,从而实现预期功能。
相关示例参考
参考几个简单的示例代码。
function num(){
var i = 0;
return function(){
console.log(i++);
}
}
var counter = num();
console.log(counter()); // 0 console.log(counter()); // ??
var counter1 = (function(){
var i = 0;
return {
get:function(){
return i;
},
set:function(val){
i = val;
},
increment:function(){
return ++i;
}
}
}());
console.log(counter1);
console.log(counter1.get()); // ?
console.log(counter1.set(3)); // ?
console.log(counter1.increment()); // ?
console.log(counter1.increment()); // ?
console.log(counter1);
console.log(counter1.get()); // 0
console.log(counter1.set(3)); // 3
console.log(counter1.increment()); // 4
console.log(counter1.increment()); // 5
以上介绍了JS遍历ul下li点击弹出索引的方法,希望对大家有所帮助。如有疑问请留言,小编会及时回复。感谢支持。
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
