对于一个"ul"列表,单击弹出每个"li"对应的索引
2017-06-12 15:36
295 查看
我们经常会遇见在遍历一个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>
相关文章推荐
- JS中for循环出现的问题:如何给li元素绑定事件,点击每个li元素弹出对应的索引?
- 『JQuery』 点击ul列表下的li会弹出提示框显示每个li中的内容
- HTML树形结构,用ID代替 "UL" "li"
- 一个数组分四个ul并且每个ul里边有四个li显示
- OpenERP-隐藏多对多域弹出列表视图的"新建"按钮(Hide the "Create" button from the popup list view of a many2many field)
- 给一个ul列表中点击到的li赋予样式
- 给你一个字符串s和一个长度相同的单词列表。 找出s中所有子字符串的起始索引,这些字符串中的每个单词只是一个字符串,没有任何中介字符。
- 一个ul列表,让其前四个li显示,后面的隐藏。
- 1、点击一个ul的五个li元素,分别弹出他们的序号,用正常和闭包的方法
- 对"该字符串未被识别为有效的 DateTime。有一个从索引 8 处开始的未知字"的异常处理
- 遍历ul下的li,点击弹出li的索引
- 知乎问题"房间里100个人,每人1000元,他们玩一个游戏,每轮游戏中,每个人拿出1元,随机给另一个人,最后他们的财富分布是怎样的"实践解答
- 给你一个字符串s和一个长度相同的单词列表。 找出s中所有子字符串的起始索引,这些字符串中的每个单词只是一个字符串,没有任何中介字符。
- 点击一个列表时,输出对应的索引
- JS遍历ul下的li点击弹出li的索引的实现方法
- Python 小议1: 求一个不确定列表中的每个数的对应数的次幂和。
- [转]一个UL和LI写出来的简单的图片列表
- 程序集(CLR)调用web service出现"在执行用户定义历城或聚合期间出现.net framework错误,索引(从零开始必须大于或等于零,且小于参数列表的大小)"
- 使用LinqDataSource出现“找不到与ViewState中存储的原始值中的给定键相匹配的行,请确保"keys"字典包含与上一个Select操作返回的行对应的唯一键值”错误的解决办法
- div+css布局必了解的列表元素ul ol li dl dt dd详解