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程序来实现动画功能
Mar 06 Javascript
javascript打开word文档的方法
Apr 16 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
简单的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扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
Python容器类型公共方法总结
2020/08/19 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
详解pandas映射与数据转换
2021/01/22 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
RealTek面试题
2016/06/28 面试题
机械工程系毕业生求职信
2013/09/27 职场文书
理货员的岗位职责
2013/11/23 职场文书
商场中秋节活动方案
2014/02/07 职场文书
广播体操口号
2014/06/18 职场文书
小学捐书活动总结
2014/07/05 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python