实现点击列表弹出列表索引的两种方式
更新时间：2013年03月08日 11:30:41 作者：
使用利用事件冒泡委托给列表的父节点去处理的方式第二种方式就是使用闭包了，感兴趣的你可以参考下本文，或许对你学习js有所帮助
方式一，使用利用事件冒泡委托给列表的父节点去处理的方式：
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>
复制代码 代码如下:
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模块化机制实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
今天小编就为大家分享一篇关于ligerui子页面关闭后,父页面刷新,重新加载的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
JS的IE和Firefox兼容性集锦...2006-12-12
这篇文章主要介绍了高性能JavaScript 重排与重绘,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了微信小程序map地图使用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
擦除效果在我们日常开发中也是时有见到的，通过擦除效果大大加强了与用户的交互性，所以下面这篇文章主要给大家介绍了利用js和canvas实现擦除效果的相关资料，文中给出了详细的介绍和示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。2017-04-04
网上关于JavaScript实现倒计时的文章有很多，但是一般都是刷新后会重新开始计时，可是我们有的时候会需要刷新却不重新计算的倒计时，这该怎么做呢？下面我们一起来看看这种倒计时怎么实现吧。2016-08-08
这篇文章主要为大家详细介绍了JavaScript实现简单的树形菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
在JavaScript的编程世界里,我们时常被普通函数的冗长写法所困扰,每次都需要写function关键字,有时候还要明确地写return语句,下面我们就来看看如何利用箭头函数优化这些繁琐的代码吧2023-11-11
sessionStorage是指本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,这篇文章主要给大家介绍了关于js前端存储之sessionStorage使用方法的相关资料,需要的朋友可以参考下2024-06-06
最新评论