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 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
javascript 跳转代码集合
Dec 03 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
React+EggJs实现断点续传的示例代码
Jul 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
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php类的定义与继承用法实例
2015/07/07 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python实现自主查询实时天气
2018/06/22 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
升旗仪式演讲稿
2014/05/08 职场文书
就职演讲稿范文
2014/05/19 职场文书
药剂专业求职信
2014/06/20 职场文书
个人授权委托书范本
2014/09/14 职场文书
导游欢迎词范文
2015/01/23 职场文书
科级干部培训心得体会
2016/01/06 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python