晒单评价打分星星

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;*/
}




效果图