实现点击列表弹出列表索引的两种方式


Posted in Javascript onMarch 08, 2013

方式一,使用利用事件冒泡委托给列表的父节点去处理的方式

var ulObj = document.getElementById("myUl"); 
ulObj.onclick = function (event) { 
var tg = event.target; 
var liArray = ulObj.getElementsByTagName("li"); 
for (var i = 0; i < liArray.length; i++) { 
if (liArray[i] === tg) { 
alert(i + 1); 
} 
} 
}

方式二,使用闭包
var liArray = document.getElementById("myUl").getElementsByTagName("li"); 
for (var i = 0; i < liArray.length; i++) { 
(function () { 
var n = i; 
liArray[i].onclick = function () { 
alert(n + 1); 
} 
})(i) 
}

HTML代码
<ul id='myUl'> 
<li>haha</li> 
<li>heihei</li> 
<li>hehe</li> 
<li>gaga</li> 
</ul>
Javascript 相关文章推荐
jQuery的三种$()
Dec 30 Javascript
javascript new后的constructor属性
Aug 05 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
mailto的使用技巧分享
Dec 21 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
详解VUE 数组更新
Dec 16 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
很好用的js日历算法详细代码
Mar 07 #Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 #Javascript
JS链式调用的实现方法
Mar 07 #Javascript
jQuery滚动加载图片效果的实现
Mar 06 #Javascript
HTML上传控件取消选择
Mar 06 #Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 #Javascript
JQuery操作tr和td内容的方法实例
Mar 06 #Javascript
You might like
使用数据库保存session的方法
2006/10/09 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
用python对excel查重
2020/12/07 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
优秀体育委员自荐书
2014/01/31 职场文书
小学生开学感言
2014/02/28 职场文书
项目投资意向书
2014/04/01 职场文书
会计专业自荐书
2014/07/08 职场文书
六年级数学教学反思
2016/02/16 职场文书
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis