用户评价 打星等级 效果 jQuery

<style>

.pj_m1_3 { 640px;margin:0;  padding:20px 0; overflow:hidden;}
.pj_m1_3 ul li{ 50%; float:left; overflow:hidden; font-size:1.125em; color:#1e1e1e; line-height:40px;margin:0; padding:0; list-style-type:none;}
.pj_m1_3 ul li span{ 42px; height:40px; display:block; float:left; margin-right:13px; background:url(../images/ym5.png) no-repeat; background-size:100%;}
.pj_m1_3 ul li span.xbgimg { background:url(../images/ym4.png) no-repeat center; background-size:100%;}

</style>

<div class="pj_m1_3">
<ul>
<li style="100%;">商城评分</li>
</ul>
<ul style="padding:15px 0 15px;">
<li>发货速度</li>
<li><span></span><span></span><span></span><span></span><span></span></li>
</ul>
<ul style="padding:15px 0 15px;">
<li>服务态度</li>
<li><span></span><span></span><span></span><span></span><span></span></li>
</ul>
</div>

<script>
$(function(){

$(".pj_m1_3 ul li >span").click(function(){
    var dx=$(this).index();
    var oPa=$(this).parent();
    if(!$(this).hasClass("xbgimg")){
        $(this).addClass("xbgimg");
        for(i=0;i<dx;i++){
            oPa.find("span").eq(i).addClass("xbgimg");
}

}else{
switch (dx){
case dx=0:
oPa.find("span").removeClass("xbgimg");
break;
case dx=1:
oPa.find("span:gt(1)").removeClass("xbgimg");
break;
case dx=2:
oPa.find("span:gt(2)").removeClass("xbgimg");
break;
case dx=3:
oPa.find("span:gt(3)").removeClass("xbgimg");
break;
case dx=4:
oPa.find("span:gt(4)").removeClass("xbgimg");
break;
}
$(this).removeClass("xbgimg");

}


});
});
</script>

*** 提醒：页面中不要忘记引用jQuery文件  如果自己调试不出效果可以向我索要源文件QQ：194018887 欢迎添加交流