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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
javascript 函数式编程
Aug 16 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
iScroll.js 使用方法参考
May 16 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
微信小程序实现图片压缩
Dec 03 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
javascript与CSS复习(三)
2010/06/29 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python3 简单实现组合设计模式
2020/07/02 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
南京某软件公司的.net面试题
2015/11/30 面试题
学生会招新策划书
2014/02/14 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
环保专项行动方案
2014/05/12 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android