超级简单的评分功能，分为四个步骤轻松搞定：
第一步：
引入jquery文件；这里我用百度CDN的jquery：
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
第二步：
写HTML代码；这里的星星我用的是符号的星星，也可以做成图片，用2张背景图片进行切换：
1 <div class="score_star"> 2 <i>★</i> 3 <i>★</i> 4 <i>★</i> 5 <i>★</i> 6 <i>★</i> 7 <p>您还未评价</p> 8 </div>
第三步：
写CSS样式；这里我为了方便把样式写在head里面：
1 <style type="text/css"> 2 .score_star {text-align: center;} 3 .score_star i {color: #999;font-size: 28px;font-style: normal;cursor: pointer;} 4 .score_star i.on {color: #c8a377;} 5 </style>
第四步：
写JavaScript代码；好了，打瞌睡的童鞋抬起头，灯光照过来，往死里照，要画重点了：
重点是slice(0,1)方法，就是选中重第0个到第1个，第一个数字是从0开始算起，第二个数字是从1开始算起的。
1 <script type="text/javascript"> 2 $(function(){ 3 // 星星选择评价事件 4 $(".score_star >i").click(function(event) { 5 // 点击当前 6 var _index = $(this).index(); 7 // 所有的星星 8 var i = $(this).parent().find("i"); 9 i.removeClass("on"); 10 // 点击第i个，第一个到i个添加类名on 11 switch(_index){ 12 case 0: 13 i.slice(0,1).addClass("on"); 14 $(this).siblings('p').html("我有一个退货想和你谈谈"); 15 break; 16 case 1: 17 i.slice(0,2).addClass("on"); 18 $(this).siblings('p').html("已被99%人超越"); 19 break; 20 case 2: 21 i.slice(0,3).addClass("on"); 22 $(this).siblings('p').html("只能说一般般"); 23 break; 24 case 3: 25 i.slice(0,4).addClass("on"); 26 $(this).siblings('p').html("骚年还不错"); 27 break; 28 case 4: 29 i.slice(0,5).addClass("on"); 30 $(this).siblings('p').html("一见钟情"); 31 break; 32 default: 33 alert("少年醒醒，你的代码出bug了"); 34 break; 35 } 36 }); 37 }); 38 </script>
最后，整个代码为：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简易-星星评分-功能-jQuery纯手写</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7 <style type="text/css"> 8 .score_star {text-align: center;} 9 .score_star i {color: #999;font-size: 28px;font-style: normal;cursor: pointer;} 10 .score_star i.on {color: #c8a377;} 11 </style> 12 </head> 13 <body> 14 <div class="score_star"> 15 <i>★</i> 16 <i>★</i> 17 <i>★</i> 18 <i>★</i> 19 <i>★</i> 20 <p>您还未评价</p> 21 </div> 22 <script type="text/javascript"> 23 $(function(){ 24 // 星星选择评价事件 25 $(".score_star >i").click(function(event) { 26 // 点击当前 27 var _index = $(this).index(); 28 // 所有的星星 29 var i = $(this).parent().find("i"); 30 i.removeClass("on"); 31 // 点击第i个，第一个到i个添加类名on 32 switch(_index){ 33 case 0: 34 i.slice(0,1).addClass("on"); 35 $(this).siblings('p').html("我有一个退货想和你谈谈"); 36 break; 37 case 1: 38 i.slice(0,2).addClass("on"); 39 $(this).siblings('p').html("已被99%人超越"); 40 break; 41 case 2: 42 i.slice(0,3).addClass("on"); 43 $(this).siblings('p').html("只能说一般般"); 44 break; 45 case 3: 46 i.slice(0,4).addClass("on"); 47 $(this).siblings('p').html("骚年还不错"); 48 break; 49 case 4: 50 i.slice(0,5).addClass("on"); 51 $(this).siblings('p').html("一见钟情"); 52 break; 53 default: 54 alert("少年醒醒，你的代码出bug了"); 55 break; 56 } 57 }); 58 }); 59 </script> 60 </body> 61 </html>
怎么样，是不是很简单？