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


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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JS猜数字游戏实例讲解
Jun 30 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
层叠菜单的动态生成
2006/10/09 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript 动态生成私有变量访问器
2009/12/06 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
Javascript 之封装(Package)
2018/09/14 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python让列表倒序输出的实例
2018/06/25 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
深入了解Django View(视图系统)
2019/07/23 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
2014年电工工作总结
2014/11/20 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
python批量创建变量并赋值操作
2021/06/03 Python