关于实现点击一行，下一行变色问题

最新推荐文章于 2020-10-19 16:52:14 发布

勤奋笨笨鸟

最新推荐文章于 2020-10-19 16:52:14 发布

阅读量345

点赞数

分类专栏： js 前端页面的坑

本文链接：https://blog.csdn.net/weixin_40098371/article/details/82693230

版权

前端页面的坑同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

在实现点击某行后下一行变色的功能时，遇到点击事件中循环变量i值错误导致总是第一行高亮的问题。问题源于循环完成与事件触发的时间不一致。解决方案是使用事件源this标识当前点击对象，并将涉及循环次数的判断移到循环外部。通过调整后，成功实现了预期效果。

摘要由CSDN通过智能技术生成

今天在做如题目说的效果（如下代码）时，发现在时间注册函数中判断循环值出现问题。所有的节点的点击事件后都是第一行高亮。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<ul id = "node">
	<li>下一个兄弟节点高亮</li>
	<li>下一个兄弟节点高亮</li>
	<li>下一个兄弟节点高亮</li>
	<li>下一个兄弟节点高亮</li>
	<li>下一个兄弟节点高亮</li>
</ul>
	<script>
	var node = document.getElementById("node");
	var li = node.children;
    
	for(var i=0; i<li.length-1; i++){
		var link = li[i];
		link.onclick = function(){
			if(i<li.length-1){
				for(var j=0; j<li.length; j++){
			    	var templink = li[j];
			    	templink.style.backgroundColor = "";
			    }
			    	console.log("this......");
	          		this.nextElementSibling.style.backgroundColor = "blue";
	          	}else{
	          		for(var j=0; j<li.length; j++){
			    	var templink = li[j];
			    	templink.style.backgroundColor = "";
			    }
			    	console.log("this......");
	          		li[0].style.backgroundColor = "blue";
	          	}
				
			

		}
	}	
	
	
	</script>
</body>
</html>

问题定位：循环操作和注册事件发生的时间不一致。循环是即时完成，而事件则是在用户操作界面触发事件时才发生的。在事件触发时，循环已经完成，所以事件中的i值是循环的终点值（li.length）。

1.基于上面的原因，在循环中，采用this来识别当前的点击对象，因为事件处理函数中的this:指的是事件源，谁调用的事件函数，this就指向谁；

2.在函数中如果需要判断循环体的控制次数的变量值，必须将判断放在循环体外面。

最终的实现代码如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<ul id = "node">
	<li>下一个兄弟节点高亮</li>
	<li>下一个兄弟节点高亮</li>
	<li>下一个兄弟节点高亮</li>
	<li>下一个兄弟节点高亮</li>
	<li>下一个兄弟节点高亮</li>
</ul>
	<script>
	var node = document.getElementById("node");
	var li = node.children;
    
	for(var i=0; i<li.length-1; i++){
		var link = li[i];
		link.onclick = function(){
				for(var j=0; j<li.length; j++){
			    	var templink = li[j];
			    	templink.style.backgroundColor = "";
			    }
			    	console.log("this......");
	          		this.nextElementSibling.style.backgroundColor = "blue";
			

		}
	}	
	li[li.length-1].onclick = function(){
				for(var j=0; j<li.length; j++){
			    	var templink = li[j];
			    	templink.style.backgroundColor = "";
			    }
			    	console.log("this......");
	          		li[0].style.backgroundColor = "blue";
			

		}
	
	</script>
</body>
</html>