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

方式一，使用利用事件冒泡委托给列表的父节点去处理的方式：


代码如下:

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>

赞 (0)

相关推荐

  • Angular弹出模态框的两种方式

    Angular弹出模态框的两种方式

    在开始我们的blog之前,我们要先安装ngx-bootstrap-modal npm install ngx-bootstrap-modal --save 不然我们的模态框效果会难看到你想吐 一.弹出方式一(此方法来自https://github.com/cipchk/ngx-bootstrap-modal) 1.alert弹框 (1)demo目录 --------app.component.ts --------app.component.html --------app.module.ts

  • Android监听软键盘弹出与隐藏的两种方法

    需求: 现在有一个需求是点击一行文本框,弹出一个之前隐藏的输入框,输入完成后按返回键或者其他的东西隐藏键盘和输入框,将输入框的内容填充到文本框中. 实现: 拿到这个需求的第一反应就是写一个监听来监听键盘的显示和隐藏来控制输入框的显示和隐藏,控制文本框中的内容. 所以我做了如下操作: 指定android:windowSoftInputMode="adjustResize|stateAlwaysHidden"这个的做法是为了让键盘弹出时改变布局. 让Activity实现Layoutchan

  • JS弹出对话框实现方法(三种方式)

    本文实例讲述了JS弹出对话框实现方法.分享给大家供大家参考,具体如下: 1.警告框 <html> <head> <script type="text/javascript"> function disp_alert() { alert("我是警告框!!") } </script> </head> <body> <input type="button" onclick=&

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

    方式一,使用利用事件冒泡委托给列表的父节点去处理的方式: 复制代码 代码如下: 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++)

  • Android实现弹出列表、单选、多选框

    本文实例为大家分享了Android实现弹出列表.单选.多选框的具体代码,供大家参考,具体内容如下 效果图如下: 需要建一个menu xml布局如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schema

  • javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

    本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • jQuery点击按钮弹出遮罩层且内容居中特效

    jQuery点击按钮弹出遮罩层且内容居中特效

    本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi

  • JS点击图片弹出文件选择框并覆盖原图功能的实现代码

    简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能. js代码: <script type="text/javascript" src=

  • CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

    本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • jsp中点击图片弹出文件上传界面及实现预览实例详解

    jsp中点击图片弹出文件上传界面及实现预览实例详解 花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu

随机推荐