/*怎么修改，主要问题是在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>相关分类