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 Ajax使用 全解析
Dec 15 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 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
paypal即时到账php实现代码
2010/11/28 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python如何重载模块实例解析
2018/01/25 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
python得到windows自启动列表的方法
2018/10/14 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
小学防溺水制度
2014/01/29 职场文书
洗车工岗位职责
2014/03/15 职场文书
低碳生活倡议书
2014/04/14 职场文书
国际金融专业自荐信
2014/07/05 职场文书
商场父亲节活动方案
2014/08/27 职场文书
语文复习计划
2015/01/19 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年预算员工作总结
2015/05/14 职场文书
行政处罚告知书
2015/07/01 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
分享python函数常见关键字
2022/04/26 Python