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+xml自动生成表格的东西
Dec 21 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
es6中比较有用的7个技巧小结
Jul 12 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
python类参数self使用示例
2014/02/17 Python
Python3基础之list列表实例解析
2014/08/13 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python dumps和loads区别详解
2020/02/04 Python
Python的pygame安装教程详解
2020/02/10 Python
python3 re返回形式总结
2020/11/20 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
个人党性剖析材料
2014/02/03 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
实习推荐信
2014/05/10 职场文书
入党自荐书范文
2015/03/05 职场文书
运动会通讯稿200字
2015/07/20 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫