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


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 相关文章推荐
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
JS运算符简单用法示例
Jan 19 Javascript
vue实现淘宝购物车功能
Apr 20 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
PHP程序员编程注意事项
2008/04/10 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python requests post多层字典的方法
2018/12/27 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
自荐信需注意事项
2014/01/25 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
Golang解析JSON对象
2022/04/30 Golang