簡易-五星評分-jQuery純手寫
阿新 • • 發佈：2017-05-16
開始 round size dcl cas blog ren func fin 
超級簡單的評分功能，分為四個步驟輕松搞定：
第一步：
引入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>點擊展示所有代碼
怎麽樣，是不是很簡單？
簡易-五星評分-jQuery純手寫