评分效果
引用的图片
效果展示
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <style type="text/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;} .score{border:1px solid #E0DCDC;background:#fefdea;padding:10px;width:320px;margin:40px auto 0 auto;} .score-pro li{line-height:35px;} .score-pro li .score-info{text-align:center;display:block;} .score-star{text-align:center;} .score-star span{display:block;height:35px;} .score-star .score-txt{color:red;height:26px;line-height:26px;} .score-star i{background-image:url("star.png");background-repeat:no-repeat;display:inline-block;width:35px;height:35px;margin:0 5px;} .score-star .star1{background-position:0px 0px;} .score-star .star2{background-position:-41px 0px;} .score-star .star3{background-position:-83px 0px;} .score-star .star4{background-position:-124px 0px;} .score-star .star5{background-position:-165px 0px;} .score-star .star-solid.star1{background-position:0px -35px;} .score-star .star-solid.star2{background-position:-41px -35px;} .score-star .star-solid.star3{background-position:-83px -35px;} .score-star .star-solid.star4{background-position:-124px -35px;} .score-star .star-solid.star5{background-position:-165px -35px;} </style> </head> <body> <!-- score 评分 --> <div class="score"> <ul class="score-pro clearfix"> <li> <!--在每一个评价条目的前面都放一个隐藏域，用来保存评分的分值，默认的分值为0 --> <input class="fl" type="hidden" name="InterviewCommentInfoSub[expAuth]" value="0" /> <span class="score-info">总体评价</span> <div class="score-star"> <span class="score-star clearfix"> <i class="star1" cjmark=""></i> <i class="star2" cjmark=""></i> <i class="star3" cjmark=""></i> <i class="star4" cjmark=""></i> <i class="star5" cjmark=""></i> </span> <span class="score-txt">未评分</span> </div> </li> <li> <input class="fl" type="hidden" name="InterviewCommentInfoSub[killAuth]" value="4" /> <span class="score-info">响应时间</span> <div class="score-star"> <span class="score-star clearfix"> <i class="star1" cjmark=""></i> <i class="star2" cjmark=""></i> <i class="star3" cjmark=""></i> <i class="star4" cjmark=""></i> <i class="star5" cjmark=""></i> </span> <span class="score-txt">未评分</span> </div> </li> <li> <input class="fl" type="hidden" name="InterviewCommentInfoSub[followTime]" value="0" /> <span class="score-info">工作态度</span> <div class="score-star"> <span class="score-star clearfix"> <i class="star1" cjmark=""></i> <i class="star2" cjmark=""></i> <i class="star3" cjmark=""></i> <i class="star4" cjmark=""></i> <i class="star5" cjmark=""></i> </span> <span class="score-txt">未评分</span> </div> </li> <li> <input class="fl" type="hidden" name="InterviewCommentInfoSub[formality]" value="3" /> <span class="score-info">审计质量</span> <div class="score-star"> <span class="score-star clearfix"> <i class="star1" cjmark=""></i> <i class="star2" cjmark=""></i> <i class="star3" cjmark=""></i> <i class="star4" cjmark=""></i> <i class="star5" cjmark=""></i> </span> <span class="score-txt">未评分</span> </div> </li> <li> <input class="fl" type="hidden" name="InterviewCommentInfoSub[appReact]" value="5" /> <span class="score-info">保密纪律</span> <div class="score-star"> <span class="score-star clearfix"> <i class="star1" cjmark=""></i> <i class="star2" cjmark=""></i> <i class="star3" cjmark=""></i> <i class="star4" cjmark=""></i> <i class="star5" cjmark=""></i> </span> <span class="score-txt">未评分</span> </div> </li> </ul> </div> </body> </html>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var degree = ['','差劲 1分','不满意 2分','一般 3分','满意 4分','超级满意 5分','未评分']; //定义一个数组，里面保存了不同的分值对应的描述
$(function(){
//点星星
$(document).on('click','i[cjmark]',function(){ //当点击某个星星时，获取到它的索引，+1后把值赋给对应的隐藏域
var num = $(this).index();
var pmark = $(this).parents('.score-star');
var mark = pmark.prevAll('input');
mark.val(num+1);
var list = $(this).parent().find('i');
for(var i=0;i<=num;i++){
list.eq(i).addClass('star-solid');
}
for(var i=num+1,len=list.length-1;i<=len;i++){
list.eq(i).removeClass('star-solid');
}
$(this).parent().next().html(degree[num+1]);
});
var ttt = $(".score-pro li");
$(ttt).each(function(){
var star = $(this).find("input").val();
if(star!=0){
$(this).find(".score-star").find(".star"+star).addClass('star-solid').prevAll().addClass('star-solid');
$(this).find(".score-txt").html(degree[star]);
}
});
})
</script>
