今天借鉴别人的思路，又用了一种方式实现淘宝五星评价，这种方式代码相对简洁些。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{height: 24px;width: 24px;}
body{font-size: 24px;}
</style>
</head>
<body>
<div id="pic1">
<span>描述相符：</span>
<img data-index='1' src="img/starw.png" >
<img data-index='2' src="img/starw.png" >
<img data-index='3' src="img/starw.png" >
<img data-index='4' src="img/starw.png" >
<img data-index='5' src="img/starw.png" >
<span></span>
</div>
<div id="pic2">
<span>物流服务：</span>
<img data-index='1' src="img/starw.png" >
<img data-index='2' src="img/starw.png" >
<img data-index='3' src="img/starw.png" >
<img data-index='4' src="img/starw.png" >
<img data-index='5' src="img/starw.png" >
<span></span>
</div>
<div id="pic3">
<span>服务态度：</span>
<img data-index='1' src="img/starw.png" >
<img data-index='2' src="img/starw.png" >
<img data-index='3' src="img/starw.png" >
<img data-index='4' src="img/starw.png" >
<img data-index='5' src="img/starw.png" >
<span></span>
</div>
<br>
<button type="button" class="float_r" onClick="submit()">提交评价</button>
</body>
<script type="text/javascript">
var divs=document.querySelectorAll('div');
for(var i=0;i<divs.length;i++){ //监听div
divs[i].addEventListener('mouseover',over);
}
function over(){ //监听img
imgs=this.querySelectorAll('img'); //把var去掉，全局变量
for(var k=0;k<imgs.length;k++){
imgs[k].addEventListener('mouseover',xuanzhong);
}
}
function xuanzhong(){
var index=this.getAttribute('data-index');
var comments=["非常差","差","一般","好","非常好"];
for(var j=0;j<imgs.length;j++){
imgs[j].src='img/starw.png';
}
this.parentNode.lastElementChild.innerHTML="";
for(var j=0;j<index;j++){
imgs[j].src='img/starred.png';
}
this.parentNode.lastElementChild.innerHTML=comments[index-1];
}
function submit(){
document.write('谢谢您的评价!');
}
</script>
</html>
879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
