对于一个ul列表,单击弹出每个li对应的索引

我们经常会遇见在遍历一个ul的时候，需要获得每一个li的索引值，或者是单击每个li弹出其对应的索引值。这里使用闭包的方式来实现这个常见事件。代码如下所示：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="author" content="mayouchen" /><meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"><title></title>
</head>
<script type="application/javascript">window.onload = function(){function iteratorFactory(i){var onclick = function(e){alert(i+1);console.log(i)}return onclick;}var clickBoxs = document.querySelectorAll('.clickBox')for (var i = 0; i < clickBoxs.length; i++){clickBoxs[i].onclick = iteratorFactory(i)}}
</script>
<body><ul><li class="clickBox">111</li><li class="clickBox">222</li><li class="clickBox">333</li><li class="clickBox">444</li><li class="clickBox">555</li></ul>
</body>
</html>

对于一个ul列表,单击弹出每个li对应的索引相关推荐

给一个ul列表中点击到的li赋予样式
2019独角兽企业重金招聘Python工程师标准>>> 效果如下,点那个那个获取样式,之前已经有样式的取消. 代码如下,我是在菜鸟教程上在线编辑的,所以就这样喽~ if判断不加也行 ...
html中如何写一个提示框,html弹出公告 html中点击列表文字弹出提示框？
怎么在网页制作中给主页设置弹出公告,要CSS布局HTML小编今天和大家分享在主页打... 无标题文档 45565 把style属性加给你的弹窗标签就可以了,宽高位置均可变. 哪位前辈高手有html的窗 ...
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
android 弹出菜单环形,『Android自定义View实战』实现一个小清新的弹出式圆环菜单...
前言 Android表现快捷菜单的形式有很多种,比如使用PopupWindow弹出来的小弹窗,类似QQ的侧拉功能菜单,以及之前讲过的弧形菜单( Android 自定义弧形旋转菜单栏--卫星菜单),这次 ...
一个简单的遮罩弹出层效果
为什么80%的码农都做不了架构师?>>> 打酱油的日子就是要多学习下,最近在学写JS类库,虽然有面对对象语言的基础,但是感觉入手前端还是压力很大,就JS来说,干了半年了,水准还 ...
asp.net中关于点击页面一个控件，弹出框的制作
先简述一下一下背景,最近有个项目中有一个页面是关于工作人员大致情况的展示页面,展示的信息放在一个gridview控件里面,控件里有一列为工作人员姓名,然后希望能达到点击姓名弹出一个框显示出此工作人员的 ...
JavaScript：原生js写的一个多按钮Popover 弹出框
效果如图需求:点击按钮弹出,如果不进行其他操作则弹出层延时消失,点击另一个按钮时清楚其他弹窗思路:先完成一个具有弹出层的按钮的样式,使用伪元素定位到按钮上方,加入定时器使其自动消失,当点击另一个按 ...
u盘创建文件时出现一个意外_U盘弹出文件或目录损坏且无法读取实测解决教程...
U盘跟其他的机器一样,使用久了难免会出故障,比如常见的弹出一个文件或目录损坏且无法读取的对话框,吓你一跳,整个U盘都损坏的意思,那里面的资料怎么办呢,所以很多人很着急,其实遇到这种情况一般都是之前使用 ...
实现一个上传文件(弹出上传框)的方法
这里将要实现一个,通过调用一个方法,弹出来一个上传文件框. 但如果仅仅只是弹出一个窗口,那就太没意义了.所以这个可通过一个对象参数,指定与哪个服务交互,文件是否可多选等. 定义该方法名称为create ...

对于一个ul列表,单击弹出每个li对应的索引

对于一个ul列表,单击弹出每个li对应的索引相关推荐

最新文章

热门文章