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

 更新时间:2016年09月19日 14:03:09   作者:胖子爱学习  
这篇文章主要介绍了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()); // ?
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点击弹出li的索引,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 详解百度百科目录导航树小插件

    详解百度百科目录导航树小插件

    本文主要介绍了百度百科目录导航树小插件,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 解决layui laydate 时间控件一闪而过的问题

    解决layui laydate 时间控件一闪而过的问题

    今天小编就为大家分享一篇解决layui laydate 时间控件一闪而过的问题,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js删除对象属性的多种方法举例

    js删除对象属性的多种方法举例

    删除属性有很多方法,学到了就在这里记录一下,下面这篇文章主要给大家介绍了关于js删除对象属性的多种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Java前后端分离之权限管理示例分析

    Java前后端分离之权限管理示例分析

    权限管理就是管理用户对于资源的操作。本 CRM 系统的权限(也称作资源)是基于角色操作权限来实现的,即RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联
    2022-08-08
  • 学习JavaScript设计模式(策略模式)

    学习JavaScript设计模式(策略模式)

    这篇文章主要带领大家学习JavaScript设计模式,其中重点介绍策略模式,以年终奖为实例对策略模式进行分析,对策略模式进行详细剖析,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS实用的动画弹出层效果实例

    JS实用的动画弹出层效果实例

    这篇文章主要介绍了JS实用的动画弹出层效果,实例分析了javascript实现动画效果弹出层的方法,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • Bootstrap进度条学习使用

    Bootstrap进度条学习使用

    这篇文章主要为大家详细介绍了Bootstrap进度条的学习使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 微信小程序使用wxParse解析html的方法示例

    微信小程序使用wxParse解析html的方法示例

    这篇文章主要介绍了微信小程序使用wxParse解析html的方法,结合实例形式详细分析了wxParse的下载、导入及具体使用技巧,需要的朋友可以参考下
    2019-01-01
  • js操作css属性实现div层展开关闭效果的方法

    js操作css属性实现div层展开关闭效果的方法

    这篇文章主要介绍了js操作css属性实现div层展开关闭效果的方法,涉及javaScript操作css样式实现div弹出层的效果,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • JS中异常抛出和处理方法图文详解

    JS中异常抛出和处理方法图文详解

    JavaScript和其他语言一样,都拥有捕获异常的机制,下面这篇文章主要给大家介绍了关于JS中异常抛出和处理的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11

最新评论