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 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 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
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
Javascript的一种模块模式
2008/03/22 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
Python发送Email方法实例
2014/08/21 Python
Python查找相似单词的方法
2015/03/05 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
运动会开幕式解说词
2014/02/05 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
个人借款协议书范本
2014/11/17 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis