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 相关文章推荐
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
js中生成map对象的方法
Jan 09 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
js重写方法的简单实现
Jul 10 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 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
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python实现FLV视频拼接功能
2020/01/21 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
客户经理岗位职责
2013/12/08 职场文书
回门宴答谢词
2014/01/13 职场文书
开学季活动策划方案
2014/02/28 职场文书
就业协议书样本
2014/08/20 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
离婚协议书范文2016
2016/03/18 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP