JS中for循环出现的问题:如何给li元素绑定事件,点击每个li元素弹出对应的索引?
【前言】
学生练习轮播时遇到一个问题,就是在HTML中写了四个< li >标签,想给每个li 绑定一个点击事件,通过点击每个li ,弹出它对应的索引。但是运行的时候发现点击任何一个li都弹出的是4,而不是对应的li索引
【主体】
页面代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习</title> <style type="text/css"> </style> </head> <body> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> </ul> <script type="text/javascript"> var li_area = document.getElementsByTagName("li"); for(var i=0;i<li_area.length;i++){ li_area[i].onclick = function(){ console.log(i) } } </script> </body> </html>
原因解析:在点击li元素时,触发点击事件,此时for循环已经结束,其中得 i 已经变为4。因此触发事件中alert(i)函数输出的永远是4。
解决方案:
(1)给每个li定义一个属性索引赋值
var li_area = document.getElementsByTagName("li"); for(var i=0;i<li_area.length;i++){ li_area[i] = i;//给每个li定义一个属性索引赋值 li_area[i].onclick = function(){ console.log(this.index) } }
(2)使用匿名函数
由于是按值传递,参数i会传递给参数 num,这样的话,每执行一次for循环,就会给li [i]创建一个num副本,也就是在内存中开辟一个空间存入num的值,这样每个li都会有对应的num值。
var li_area = document.getElementsByTagName("li"); for(var i=0;i<li_area.length;i++){ (function(num){ li_area[num].onclick = function(){console.log(num)} })(i) }
(3)匿名函数与return结合
var li_area = document.getElementsByTagName("li"); for(var i=0;i<li_area.length;i++){ li_area[i].onclick = function(n){ return function(){alert(n)} }(i); }
.
相关推荐
gufudhn 2020-06-06
nercon 2020-06-02
88274956 2020-11-03
runner 2020-09-01
梦的天空 2020-08-25
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
sunzhihaofuture 2020-06-21
FEvivi 2020-06-16
坚持着执着 2020-06-16
waterv 2020-06-14
xiaoge00 2020-06-14
firejq 2020-06-14
firstboy0 2020-06-14
e度空间 2020-06-12