js 索引下标之li集合绑定点击事件


Posted in Javascript onJanuary 12, 2018

下面一段代码给大家介绍li集合绑定点击事件,具体代码如下所示:

//Method-1:
var items = document.getElementsByTagName('li');
for(var i=0;i<items.length;i++){


items[i].index = i;


items[i].onclick = function(){



this.innerHTML = this.index;

}
}
//Method-2:
var items = document.getElementsByTagName('li');

for(var i = 0; i<items.length; i++){


(function(index){



items[i].onclick = function(){



this.innerHTML = index;


}

})(i)
}
//Method-3:
var items = document.getElementsByTagName('li');
for(var i = 0; i<items.length; i++){

items[i].onclick = function(index){


return function(){



this.innerHTML = index;


}

}(i)
}

总结

以上所述是小编给大家介绍的js 索引下标之li集合绑定点击事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
简单的Vue SSR的示例代码
Jan 12 #Javascript
详解如何在react中搭建d3力导向图
Jan 12 #Javascript
关于axios不能使用Vue.use()浅析
Jan 12 #Javascript
Vuex 进阶之模块化组织详解
Jan 12 #Javascript
动态Axios的配置步骤详解
Jan 12 #Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 #Javascript
使用JS获取SessionStorage的值
Jan 12 #Javascript
You might like
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
老生常谈Python序列化和反序列化
2017/06/28 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
详解python 中in 的 用法
2019/12/12 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
Python容器类型公共方法总结
2020/08/19 Python
Python中常用的os操作汇总
2020/11/05 Python
python中yield的用法详解
2021/01/13 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
企业内控岗位的职责
2014/02/07 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
买房协议书范本
2014/10/23 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
社区党建工作总结2015
2015/05/13 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL