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