引用的图片
效果展示
代码
<!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>
