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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
js+html实现点名系统功能
Nov 05 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
JS 建立对象的方法
2007/04/21 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
python实现计算器功能
2019/10/31 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
安全资金保障制度
2014/01/23 职场文书
运动会入场式解说词
2014/02/18 职场文书
开学寄语大全
2014/04/08 职场文书
励志演讲稿500字
2014/08/21 职场文书
技术员岗位职责
2015/02/04 职场文书
原告代理词范文
2015/05/25 职场文书