js五星评论（类似淘宝中的评论）—

js五星评论（类似淘宝中的评论）——希望能尽快得到解答

/*怎么修改，主要问题是在click事件和mouseout事件那里冲突，求大神解答哈*/




<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="utf-8">    
		<title></title>    
		<style type="text/css">    
			img{    
				width: 40px;    
				height: 40px;    
			}    
			div{    
				background-color:#444;    
			}    
		</style>    
	</head>    
	<body>    
		<div>    
			<img src="dark.JPG" />    
			<img src="dark.JPG" />    
			<img src="dark.JPG" />    
			<img src="dark.JPG" />    
			<img src="dark.JPG" />    
		</div>    
		<script>    
			var images = document.getElementsByTagName("Img");    
			//console.log(images);    
			//注册mouseOver事件    
			/*for(var i=0;i<images.length;i++){    
				images[i].addEventListener("mouseover",function(){    
					//this.src="light.JPG";    
					var index;    
					for(var j=0;j<images.length;j++){    
						if(this==images[j]){index=j;break;}    
					}    
					//console.log(index);    
					for(var n=0;n<=index;n++){    
						images[n].src="light.JPG";    
					}    
				})    
			}*/    
			    
			//注册mouseOut事件    
			for(var i=0;i<images.length;i++){    
				images[i].addEventListener("mouseout",function(){    
					//this.src="dark.JPG";    
					for(var j=0;j<images.length;j++){    
						if(images[j]<=this){    
							images[j].src="dark.JPG";    
							//console.log(j);    
						}    
					}    
				})    
			}    
			    
			//注册click事件    
			for(var i=0;i<images.length;i++){    
				var index;    
				images[i].addEventListener("click",function(){    
					//this.src="light.JPG";    
	     		for(var j=0;j<images.length;j++)    
	     		{    
	     		   	if(this==images[j])    
	     		   	{index=j;break;}    
	     		}    
	     		console.log(index);    
	     		for(var n=0;n<=index;n++){    
	     		   	console.log("我的n值："+n);    
	     		   	images[n].src="light.JPG";    
	     		}    
				})    
			}    
			    
		</script>    
	</body>    
</html>
慕仔6905114
浏览 4002回答 0
0回答

随时随地看视频慕课网APP