星级评价

说一下大体思路：

第一步布局

然后找到需要操作的元素，循环拿到所有的 li ，给每个 li 绑定一个index，然后处理鼠标移入事件，

当鼠标移入的时候，循环 <li> 的index的值，因为这个值正好可以用在 aLi[this.index] 上

开始的时候感觉点击事件和鼠标移入事件冲突，后来发现不是，是鼠标移出的时候把src又全部还原了。

然后我又新定义了一个变量，记录点击的索引，然后在鼠标移出事件的时候，根据记录下来的这个点击事件的索引，重新给把小星星的src改成了选中的，这样冲突就消失了。

然后我又碰到一个新的问题

就是移出鼠标会先把移入时选中的星星去除，然后再把点击选中的星星选上。

但是循环的话 for(var i=0;i<=dian;i++) dian如果=0，循环也会进去坐一圈，然后把索引为0的小星星选中，所以就造成了，每次移入，再移出，小星星的第一个会选中，我就给里面加了一个判断，当dian=0的时候，不作处理。

但是吧。。。。这样又造成了一个新的问题，就是，点击选中第一个小星星的话会选不中，，，，，

这就很无奈了

而且如果再反悔想重新选择的话还是有点问题。。。。

我暂时没啥优化的思路了。。。。

先这样，我贴一下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>评分</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#max{
			width: 600px;
			height: 100px;
			border: 30px solid #F1F1F1;
			border-radius: 10px;
			margin: 200px auto;
			position: relative;
			padding: 0 0 0 10px;
		}
		span{
			height: 100px;
			line-height: 100px;
		}
		div#content{
			width: 500px;
			height: 100px;
			position: absolute;
			top: 30px;
			left: 110px;
		}
		ul li{
			list-style: none;
			float: left;
			height: 40px;
			padding: 5px 5px 0 5px ;
		}
		ul li img{
			width: 30px;
		}
		img.img{
			margin: 0 0 0 20px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var arrSrc = ['img/a.png','img/b.png','img/c.png'];
			var oDiv = document.getElementById('content');
			var aLi = oDiv.getElementsByTagName('li');
			var oPing = document.getElementById('ping');
			var dang = null;
			var dian = 0;
			
			for(var i=0;i<aLi.length;i++){
				aLi[i].index = i;
				
				aLi[i].onmouseover = function(){
					dang = this.index;
										
					for(var i=0;i<=dang;i++){
						if(dang<2){
							aLi[i].getElementsByTagName('img')[0].src = arrSrc[2];
						}else{
							aLi[i].getElementsByTagName('img')[0].src = arrSrc[1];
						}
						switch(dang){
							case 0:
								oPing.innerHTML = "很差";
							break;
							case 1:
								oPing.innerHTML = "一般";
							break;
							case 2:
								oPing.innerHTML = "可以";
							break;
							case 3:
								oPing.innerHTML = "很棒";
							break;
							case 4:
								oPing.innerHTML = "极好";
							break;
						}
					}
				}
				aLi[i].onmouseout = function(){
					for(var i=0;i<=dang;i++){
						aLi[i].getElementsByTagName('img')[0].src = arrSrc[0];
					}
					for(var i=0;i<=dian;i++){	
						if(dian ==0){
							//没有操作
						}else{
							aLi[i].getElementsByTagName('img')[0].src = arrSrc[1];
						}
					}
				}
				aLi[i].onclick = function(){
					dian = dang;	
					for(var i=0;i<=dian;i++){
						aLi[i].getElementsByTagName('img')[0].src = arrSrc[1];
					}
					dang = dian;
				}
			}
			
			
			
		}
	</script>
	<body>
		<div id="max">
			<span class="">
				*
			</span>
			<span>
				评价：
			</span>
			<span id="ping">
				评价	
			</span>
			<div id="content">
				<ul>
					<li><img src="img/a.png"/></li>
					<li><img src="img/a.png"/></li>
					<li><img src="img/a.png"/></li>
					<li><img src="img/a.png"/></li>
					<li><img src="img/a.png"/></li>
				</ul>
				
				<img class="img" src="img/img.png"/>
			</div>
		</div>
	</body>
</html>

猜你喜欢