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


Posted in Javascript onSeptember 19, 2016

首先我们需要一个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的索引,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
Jquery $when done then的用法详解
May 20 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 #Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 #Javascript
详解Node.Js如何处理post数据
Sep 19 #Javascript
React Native实现简单的登录功能(推荐)
Sep 19 #Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 #Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 #Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 #Javascript
You might like
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
JS backgroundImage控制
2009/05/19 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python list语法学习(带例子)
2013/11/01 Python
Apache如何部署django项目
2017/05/21 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
秋季运动会稿件
2014/01/30 职场文书
庆七一活动总结
2014/08/27 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
单位工作证明格式模板
2014/10/04 职场文书
2014年班主任工作总结
2014/11/08 职场文书
车队安全员岗位职责
2015/02/15 职场文书
世界气象日活动总结
2015/02/27 职场文书
工作态度检讨书范文
2015/05/06 职场文书