晒单评价打分星星

html代码：（以三种类型，五星评分为例，如有多的依次添加）

<div id="mydiv1" currentIndex="0" class="mydiv">    <span class="revtit fl">描述相符:</span>    <ul class="star_ul">        <li num="1"><img src="../../../../../../images/star_full.png" class="xing_hui"/></li>        <li num="2"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>        <li num="3"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>        <li num="4"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>        <li num="5"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>    </ul></div><div id="mydiv2" currentIndex="0" class="mydiv">    <span class="revtit fl">发货速度:</span>    <ul class="star_ul">        <li num="1"><img src="../../../../../../images/star_full.png" class="xing_hui"/></li>        <li num="2"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>        <li num="3"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>        <li num="4"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>        <li num="5"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>    </ul></div><div id="mydiv3" currentIndex="0" class="mydiv">    <span class="revtit fl">服务态度:</span>    <ul class="star_ul">        <li num="1"><img src="../../../../../../images/star_full.png" class="xing_hui"/></li>        <li num="2"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>        <li num="3"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>        <li num="4"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>        <li num="5"><img src="../../../../../../images/star_full.png"  class="xing_hui"/></li>    </ul></div>js代码：（需要引进jq，默认5星好评，上传时只需上传自定义变量即可）

var describe = 5;var speed = 5;var attitude = 5;

    var isclick = false;    function change(mydivid,num) {        if (!isclick) {            var tds = $("#"+mydivid+" ul li");            for (var i = 0; i < num; i++) {                var td = tds[i];                $(td).find("img").attr("src","images\/../../../../../../images/star_full.png");            }            var tindex = $("#"+mydivid).attr("currentIndex");            tindex = tindex==0?0:tindex+1;            for (var j = num; j < tindex; j++) {                var td = tds[j];                $(td).find("img").attr("src","images\/../../../../../../images/star_empty.png");            }            $("#"+mydivid).attr("currentIndex",num);        }        if(mydivid== 'mydiv1'){//描述            if(num == 0){                 describe = 5;            }else{                 describe = num;            }//            console.log(num)        }else if(mydivid== 'mydiv2'){//速度            if(num == 0){                 speed = 5;            }else{                 speed = num;            }//            console.log(num)        }else{//心态            if(num == 0){                 attitude = 5;            }else{                 attitude = num;            }//            console.log(num)        }    }    $(function(){        initEvent('mydiv1');        initEvent('mydiv2');        initEvent('mydiv3');    });    function initEvent(mydivid) {        var tds = $("#"+mydivid+" ul li");        for (var i = 0; i < tds.length; i++) {            var td = tds[i];            $(td).bind('mouseover',function(){var num = $(this).attr("num");change(mydivid,num);});            $(td).bind('click',function(){var num = $(this).attr("num");change(mydivid,num);});        }    }css（根据需要调节）

.mydiv{   width:100%;   height:45px;   line-height:45px;   /*border:1px solid red;*/}.mydiv ul{   float:left;   height:45px;   line-height:45px;   margin-left:10px;}.mydiv ul li{   float:left;   height:45px;   line-height:45px;   margin-right:10px;}.mydiv ul li img{   width:25px;   height:25px;   margin-top:10px;   line-height:45px;   /*border:1px solid red;*/}效果图

 

来源：https://www.cnblogs.com/zhangjunming/p/7235546.html