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 DIV弹出效果实现代码
Jul 03 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 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文件读写操作之文件写入代码
2011/01/13 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
accesskey 提交
2006/06/26 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
用js编写留言板
2020/03/17 Javascript
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
django修改models重建数据库的操作
2020/03/31 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
公司前台接待岗位职责
2013/12/03 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript