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 index()方法使用代码
Jun 02 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
TypeScript入门-接口
Mar 30 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
简单的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 购物车实例(申精)
2009/05/11 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
js中判断控件是否存在
2010/08/25 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
Java基础类库面试题
2013/09/04 面试题
西式婚礼证婚词
2014/01/12 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
团委工作总结2015
2015/04/02 职场文书
专项资金申请报告
2015/05/15 职场文书
校长新学期寄语2016
2015/12/04 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
装修安全责任协议书
2016/03/22 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis