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


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 setTimeout()函数使用方法
Apr 07 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
js星星评分效果
Jul 24 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
实例讲解JavaScript 计时事件
Jul 04 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
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python面试题之列表声明实例分析
2019/07/08 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
思想道德自我评价2015
2015/03/09 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
python异步的ASGI与Fast Api实现
2021/07/16 Python
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server