仿商业网站——商品评分效果的实现

个人觉得效果还是不错的。废话不多说，先看看HTML的布局：

 
  
    
    
   rel="stylesheet" type="text/css" href="gradeStyle.css"/>
  <script src="jquery-1.11.1.js"></script>
  <script src="gradeFunction.js"></script>
  
 
 
  
    
    

    
     
     

	  
      
      

       
       
        
        商品描述：
       
       
	     
       
       
		     
        
        
	         
        
        
		     
        
        
		     
        
        
		     
        
        
       
       
		 
       
       
        
        5
       
       
		 
       
       
        
        分：
       
       
		 
       
       
        
        非常满意
       
       
      
      
	
     
     

	
     
     

	  
      
      

       
       
        
        发货速度：
       
       
	     
       
       
		     
        
        
	         
        
        
		     
        
        
		     
        
        
		     
        
        
       
       
		 
       
       
        
        5
       
       
		 
       
       
        
        分：
       
       
		 
       
       
        
        非常满意
       
       
      
      
	
     
     
	  
	
     
     

	  
      
      

       
       
        
        物流速度：
       
       
	     
       
       
		     
        
        
	         
        
        
		     
        
        
		     
        
        
		     
        
        
       
       
		 
       
       
        
        5
       
       
		 
       
       
        
        分：
       
       
		 
       
       
        
        非常满意
       
       
      
      
	
     
     
  
    
    
 

CSS样式如下（这里没有用到伪类，实现样式变换的方法稍后会提到，是用jQuery实现的）：

.container {width:70%; height:auto; margin-right:auto; margin-left:auto; background:#efefef; padding:10px; border-radius:10px; font-family:"Microsoft YaHei","微软雅黑";}
.container .item {width:95%; height:50px; margin-right:auto; margin-left:auto; background:white; margin-top:10px; margin-bottom:10px; font:20px;}
.container .item dt {height:30px; margin:12px 10px; float:left;}
.container .item dt.star {margin:5px 0px; float:left;}
.container .item dt.grade {height:30px; margin:12px 0px 12px 10px; float:left; color:#ffdd22; font:bold;}
.container .item dt.fen {height:30px; margin:12px 0px; float:left; color:#ffdd22; font:bold;}
.container .item dt.comment {height:30px; margin:12px 0px; float:left; color:#ffdd22; font:bold;}
.container .item a {width:0px; height:0px; margin-top:12px;}
.container .item .current {position:relative; background:url(star.png); z-index:5; width:150px; height:30px; top:5px; left:100px;}

最重要的js如下：

$(document).ready(function(){
	//鼠标点击事件
	$("div.item").find("a").on("click",function(){
		n = $(this).attr("id");
		list = $(this).parent("dt").parent("dl");
		//改变星星颜色
		$(this).prevAll("a").children("img").attr("src","star_hover.png");
		$(this).children("img").attr("src","star_hover.png");
		$(this).nextAll("a").children("img").attr("src","star.png");
		//改变分数描述
		list.find("dt.grade").text(n);
		switch(n)
		{
		case "1":
			list.find("dt.comment").text("很不满意");
			break;
		case "2":
			list.find("dt.comment").text("不满意");
			break;
		case "3":
			list.find("dt.comment").text("一般");
			break;
		case "4":
			list.find("dt.comment").text("比较满意");
			break;
		case "5":
			list.find("dt.comment").text("非常满意");
			break;
		}
	});

})

改变星星颜色应该是这段代码中比较重要的一部分。思路其实很简单，就是在click的那一排星星中，被点击之前的星星（就是左边的星星）应该改变星星样式，而剩下的应该恢复成为点亮的状态。

所以在不确定之前星星的状态时（可能之前评价过了，现在想修改评价），先改变被点亮星星的样式，用.prevAll("a")来寻找被点击节点之前的所有兄弟节点，然后修改当前被点击的星星的样式，最后用.nextAll("a")修改其后面的兄弟节点。