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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
js常用DOM方法详解
Feb 04 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
简单的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
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
中英文自我评价语句
2013/12/20 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
《乌塔》教学反思
2014/02/17 职场文书
争先创优活动总结
2014/08/27 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫