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


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打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
js登录弹出层特效
Mar 07 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
js仿微博动态栏功能
Feb 22 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
微信公众平台接口开发入门示例
2014/12/24 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Django app配置多个数据库代码实例
2019/12/17 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
个人先进事迹材料
2014/12/29 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby