用户评价 打星等级 效果 jQuery
<style>
.pj_m1_3 { width:640px;margin:0; padding:20px 0; overflow:hidden;}
.pj_m1_3 ul li{ width: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{ width: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="width: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 欢迎添加交流
