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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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制作静态网站的模板框架
2006/10/09 PHP
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python基于当前时间批量创建文件
2020/05/07 Python
python在地图上画比例的实例详解
2020/11/13 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
医药营销专业个人自荐信
2013/09/29 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
金砖之国观后感
2015/06/11 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python