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 的 trim 函数的代码
Aug 13 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
PHP错误机制知识汇总
2016/03/24 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python异常处理例题整理
2019/07/07 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
python爬虫如何解决图片验证码
2021/02/14 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
介绍一下EJB的体系结构
2012/08/01 面试题
市场部岗位职责
2015/02/12 职场文书