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函数返回多个返回值的示例代码
Nov 05 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
vuejs如何配置less
Apr 25 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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+DBM的同学录程序(4)
2006/10/09 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
three.js实现圆柱体
2018/12/30 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python追加元素到列表的方法
2015/07/28 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python socket处理client连接过程解析
2020/03/18 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
物业管理个人自我评价
2013/11/08 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
Mysql 一主多从的部署
2022/05/20 MySQL