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 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
使用图灵api创建微信聊天机器人
2015/07/23 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
某公司部分笔试题
2013/11/05 面试题
师范生自荐信范文
2013/10/06 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
社区活动总结报告
2014/05/05 职场文书
校庆活动策划方案
2014/06/05 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技