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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
vue的$http的get请求要加上params操作
Nov 12 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 加密解密内部算法
2010/04/22 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python pycurl验证basic和digest认证的方法
2018/05/02 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
会计人员演讲稿
2014/09/11 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
针对吵架老公保证书
2015/05/08 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
python函数的两种嵌套方法使用
2022/04/02 Python
原生JS实现分页
2022/04/19 Javascript