JS遍历ul下的li点击弹出li的索引的实现方法 - CSDN文库

159 浏览量更新于2023-05-05 评论收藏 39KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

JS遍历遍历ul下的下的li点击弹出点击弹出li的索引的实现方法的索引的实现方法

首先我们需要一个html结构

<div >

<ul>

<li>a</li>

<li>a</li>

<li>a</li>

<li>a</li>

<li>a</li>

</ul>

</div>

我们遍历ul 下所有的li 并添加点击事件，一般我们会在for循环里面添加点击事件，但是结果和我们所期盼不一样，那么是为什

么呢？？？？

接下来看看我们的js代码

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()); // ？

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38501916

粉丝: 1
资源: 935

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈