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);
}

.

相关推荐