jQuery實現星星評分樣式
阿新 • • 發佈：2019-02-18
效果圖如下：
原理：當滑鼠經過或點選時改變對應位置的圖片想要實現這個外掛首先需要了解jQuery的三個事件：mouseover（滑鼠經過）、mouseout（滑鼠離開）、click（滑鼠點選）。
瞭解了這三個事件剩下的就是對他們進行監聽，然後進行相應的邏輯處理就行了。
先貼出css樣式和頁面的主要程式碼：
*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";color:#5e5e5e;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-table} *html .clearfix{height:1%} .clearfix{display:block} *+html .clearfix{min-height:1%} .fl{float:left;} .gradecon{border:1px solid #E0DCDC;background:#fefdea;padding:10px;width:320px;margin:40px auto 0 auto;} .rev_pro li{line-height:20px;height:20px;} .rev_pro li .revtit{text-align:right;display:block;float:left;margin-right:10px;width:70px;} .revinp{float:left;display:inline;} .level .level_solid,.level .level_hollow{float:left;background-image:url("img/icon2.png");background-repeat:no-repeat;display:inline-block;width:15px;height:15px;} .level .level_solid{background-position:0px 0px;} .level .level_hollow{background-position:-21px 0px;} .revgrade{margin-left:20px;}
<div class="gradecon" id="Addnewskill_119"> <ul class="rev_pro clearfix"> <li> <!--在每一個評價條目的前面都放一個隱藏域，用來儲存評分的分值，預設的分值為0 --> <input class="fl" type="hidden" style="margin-top:2px;" name="InterviewCommentInfoSub[expAuth]" value="0" /> <span class="revtit">總體評價</span> <div class="revinp"> <span class="level"> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> </span> <span class="revgrade">未評分</span> </div> </li> <li> <input class="fl" type="hidden" style="margin-top:2px;" name="InterviewCommentInfoSub[killAuth]" value="0" /> <span class="revtit">響應時間</span> <div class="revinp"> <span class="level"> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> </span> <span class="revgrade">未評分</span> </div> </li> <li> <input class="fl" type="hidden" style="margin-top:2px;" name="InterviewCommentInfoSub[followTime]" value="0" /> <span class="revtit">工作態度</span> <div class="revinp"> <span class="level"> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> </span> <span class="revgrade">未評分</span> </div> </li> <li> <input class="fl" type="hidden" style="margin-top:2px;" name="InterviewCommentInfoSub[formality]" value="0" /> <span class="revtit">審計質量</span> <div class="revinp"> <span class="level"> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> </span> <span class="revgrade">未評分</span> </div> </li> <li> <input class="fl" type="hidden" style="margin-top:2px;" name="InterviewCommentInfoSub[appReact]" value="0" /> <span class="revtit">保密紀律</span> <div class="revinp"> <span class="level"> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> <i class="level_hollow" cjmark=""></i> </span> <span class="revgrade">未評分</span> </div> </li> </ul> </div>
以上程式碼裡面引用了圖片資源，所以不能直接複製執行。
首先分析一下需求：
一、滑鼠第一次經過星星此時是未評價狀態，隱藏域的值為0，星星需要跟隨滑鼠的移動而改變，但是如果滑鼠未點選星星，當滑鼠離開時星星應恢復未評價的狀態，且對應隱藏域的值仍未0.
二、滑鼠不是第一次經過星星，此時隱藏域的值不為0，且星星已經有幾顆亮了，星星仍需要跟隨滑鼠的移動而改變，但是如果滑鼠未點選星星，當滑鼠離開時星星應恢復上次點選過的狀態，即星星亮的個數與對應隱藏域的值相等。
三、滑鼠經過星星，不論是否為第一次經過，當滑鼠點選星星時，獲取星星的索引值後加1，然後把值賦給對應的隱藏域。
js程式碼分析：
var degree = ['','很差','差','中','良','優','未評分']; //定義一個數組，裡面儲存了不同的分值對應的描述 $(function(){}); //三個事件的監聽在頁面載入完成後就自動進行，所以監聽方法寫在這個匿名函式中
滑鼠經過事件
//滑鼠經過事件
$(document).on('mouseover','i[cjmark]',function(){
var num = $(this).index(); //獲取當前經過的星星的索引
var pmark = $(this).parents('.revinp'); //獲取當前經過星星的父節點中的 <div class="revinp">
var mark = pmark.prevAll('input'); //獲取當前經過星星的父節點<div class="revinp">的所有左邊兄弟節點中的input
//var val = mark.val();
//if(mark.prop('checked')) return false;
var list = $(this).parent().find('i');//獲取當前經過星星的兄弟節點，即所有的星星
for(var i=0;i<=num;i++){ //設定從第一個星星到當前經過的星星都變亮，實現的辦法就是修改他們所顯示的圖片，可以看一下css樣式中
list.eq(i).attr('class','level_solid'); //level_solid樣式
}
for(var i=num+1,len=list.length-1;i<=len;i++){ //設定從當前經過的星星的後一個到最後一個星星為白色樣式
list.eq(i).attr('class','level_hollow');
}
$(this).parent().next().html(degree[num+1]); //獲取到當前經過的星星的父節點的下一個兄弟節點即<span class="revgrade">，
//設定他顯示的文字內容
});
滑鼠離開事件
$(document).on('mouseout','i[cjmark]',function(){
var num = $(this).index();
var pmark = $(this).parents('.revinp');
var mark = pmark.prevAll('input');
var val = parseInt(mark.val());//獲取到對應的隱藏域的值，並把它轉換為int型方便後邊計算
//if(mark.prop('checked')) return false;
var list = $(this).parent().find('i');
//alert(list.length);
if(val != 0){ //當滑鼠離開時首先判斷對應隱藏域的值是否為0
for(var i=0;i<=val;i++){ //如果不為0，把從第一個到第val的星星設定變亮
list.eq(i).attr('class','level_solid');
}
//alert(val);
for(var i=val,len=list.length-1;i<=len;i++){ //然後把val+1到最後一個星星設定為白色
list.eq(i).attr('class','level_hollow');
}
$(this).parent().next().html(degree[val]); //修改後面顯示的文字
}else{ //如果val為0，那就把所有的星星都設為白色
for(var i=0;i<=list.length-1;i++){
list.eq(i).attr('class','level_hollow');
}
$(this).parent().next().html("未評分"); //後面的文字設為“未評分”
}
})滑鼠點選事件
$(document).on('click','i[cjmark]',function(){ //當點選某個星星時，獲取到它的索引，+1後把值賦給對應的隱藏域
var num = $(this).index();
var pmark = $(this).parents('.revinp');
var mark = pmark.prevAll('input');
mark.val(num+1);
})下面是完整的js程式碼
var degree = ['','很差','差','中','良','優','未評分'];
$(function(){
//點星星
$(document).on('mouseover','i[cjmark]',function(){
var num = $(this).index();
var pmark = $(this).parents('.revinp');
var mark = pmark.prevAll('input');
//var val = mark.val();
//if(mark.prop('checked')) return false;
var list = $(this).parent().find('i');
for(var i=0;i<=num;i++){
list.eq(i).attr('class','level_solid');
}
for(var i=num+1,len=list.length-1;i<=len;i++){
list.eq(i).attr('class','level_hollow');
}
$(this).parent().next().html(degree[num+1]);
});
$(document).on('mouseout','i[cjmark]',function(){
var num = $(this).index();
var pmark = $(this).parents('.revinp');
var mark = pmark.prevAll('input');
var val = parseInt(mark.val());
//if(mark.prop('checked')) return false;
var list = $(this).parent().find('i');
//alert(list.length);
if(val != 0){
for(var i=0;i<=val;i++){
list.eq(i).attr('class','level_solid');
}
//alert(val);
for(var i=val,len=list.length-1;i<=len;i++){
list.eq(i).attr('class','level_hollow');
}
$(this).parent().next().html(degree[val]);
}else{
for(var i=0;i<=list.length-1;i++){
list.eq(i).attr('class','level_hollow');
}
$(this).parent().next().html("未評分");
}
})
//點選星星
$(document).on('click','i[cjmark]',function(){
var num = $(this).index();
var pmark = $(this).parents('.revinp');
var mark = pmark.prevAll('input');
mark.val(num+1);
})
})至此就實現了評分的功能，所有的分值都儲存在對應的隱藏域中，可以根據自己的需要獲取。