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 相关文章推荐
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
jQuery取id有.的值的方法
May 21 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
js生成随机数的过程解析
Nov 24 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
十分钟教你上手ES2020新特性
Feb 12 Javascript
在JavaScript中如何使用宏详解
May 06 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 header功能的使用
2013/10/28 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
Python实现网站表单提交和模板
2019/01/15 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
python实现连连看游戏
2020/02/14 Python
基于python图像处理API的使用示例
2020/04/03 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
应届生高等护理求职信
2013/10/12 职场文书
集体备课反思
2014/02/12 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
保密工作整改报告
2014/11/06 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
爱心捐款感谢信
2015/01/20 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python