JS中for循环出现的问题：如何给li元素绑定事件，点击每个li元素弹出对应的

最新推荐文章于 2022-08-18 14:52:46 发布

骆小胖

最新推荐文章于 2022-08-18 14:52:46 发布

阅读量2.6k

点赞数 1

分类专栏： JS 笔记随笔前端积累教学笔录学生提问文章标签： JS 笔记随笔前端积累教学笔录学生提问 ViewUI

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819063

版权

前端积累同时被 3 个专栏收录

105 篇文章 0 订阅

订阅专栏

笔记随笔

75 篇文章 0 订阅

订阅专栏

教学笔录

73 篇文章 0 订阅

订阅专栏

【前言】

学生练习轮播时遇到一个问题，就是在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);
}