jQuery可多次使用的星型评级插件

一个关于jquery星级插件的博文，那是我从网上收集的，它只支持一个页面中使用一次，多次使用的话会发生冲突，达不到我项目的需求，没办法，只能修改它

效果图如下：

 

css所需背景图片：

下面是代码

html代码

    <div class="xing">  
    <span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font></span><div  
    class="rating-wrap">  
    <ul id="xing1">  
    <li><a href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star">  
    </a></li>  
    <li><a href="javascript:;" data-rate-value="20" data-hint="差" title="差" class="two-stars ">  
    </a></li>  
    <li><a href="javascript:;" data-rate-value="30" data-hint="还行" title="还行" class="three-stars ">  

    </a></li>  
    <li><a href="javascript:;" data-rate-value="40" data-hint="好" title="好" class="four-stars">  
    </a></li>  
    <li><a href="javascript:;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars">  
    </a></li>  
    </ul>  
    </div>  
    <span class="xing1">点击星星开始打分</span>  
    </div>  
    <divclassdivclass="xing">  
    <span style="float: left">广告效果:<font color="#CC3300"size="-1">*</font></span><div  
    class="rating-wrap">  
    <ulidulid="xing2">  
    <li><a href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star">  
    </a></li>  
    <li><a href="javascript:;" data-rate-value="20" data-hint="差" title="差" class="two-stars ">  
    </a></li>  
    <li><a href="javascript:;" data-rate-value="30" data-hint="还行" title="还行" class="three-stars ">  
    </a></li>  
    <li><a href="javascript:;" data-rate-value="40" data-hint="好" title="好" class="four-stars">  
    </a></li>  
    <li><a href="javascript:;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars">  
    </a></li>  
    </ul>  
    </div>  
    <span class="xing2">点击星星开始打分</span>  
    </div> 

js代码

<script type="text/javascript" src="js/jQuery_1.42.js"></script>  
<script type="text/javascript">  
$(function(){  
$(".rating-wrap a").mouseover(function(){  
$(this).parent().siblings().find("a").removeClass("active-star");  
$(this).addClass("active-star");  
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint"))  
}).mouseleave(function(){  
var selectID=$(this).parent().parent().attr("id")+"select";  
$(this).removeClass("active-star");  
if($("#"+selectID).length==0)  
{  
$("."+$(this).parent().parent().attr("id")).removeClass("active-hint").html("点击星星开始打分");  
}  

else  
{  
$("."+$(this).parent().parent().attr("id")).html($("#"+selectID).attr("data-hint"));  
$("#"+selectID).addClass("active-star");  
}  
}).click(function(){  
$(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id")+"select");  
$(this).parent().siblings().find("a").attr("id","");  
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint");  
})  
})  
</script> 

<style>  

css代码
.item-rank-rst, .user-rank-rst, .rating-wrap ul, .rating-wrap a:hover, .rating-wrap .active-star, .user-m-star, .urr-rank60, .breadcrumb .note {  
background-image: url(xing_bg.png);/**-----星级插件背景图片----**/  
background-repeat: no-repeat;  
}  
.rating-wrap {  
background: none repeat scroll 0 0 #FFF9F1;  
border: 1px solid #EFE0D7;  
display: inline-block;  
float: left;  
height: 20px;  
margin-right: 5px;  
padding: 4px 0 0 5px;  
position: relative;  
top: -2px;  
width: 89px;  
z-index: 0;  
}  
.rating-wrap ul {  
background-position: 0 -250px;  
height: 16px;  
position: relative;  
width: 85px;  
z-index: 10;  
}  
.rating-wrap li {  
display: inline;  
}  
.rating-wrap a {  
display: block;  
height: 16px;  
left: 0;  
position: absolute;  
top: 0;  
}  
.rating-wrap .five-stars {  
background-position: 0 -160px;  
width: 84px;  
z-index: 10;  
}  
.rating-wrap .four-stars {  
background-position: 0 -178px;  
width: 68px;  
z-index: 20;  
}  
.rating-wrap .three-stars {  
background-position: 0 -196px;  
width: 51px;  
z-index: 30;  
}  
.rating-wrap .two-stars {  
background-position: 0 -214px;  
width: 34px;  
z-index: 40;  
}  
.rating-wrap .one-star {  
background-position: 0 -232px;  
width: 17px;  
z-index: 50;  
}  
.rating-block .hint {  
color: #999999;  
float: left;  
}  
.active-hint {  
color: #CC0000;  
}  
.rating-block .err-hint {  
color: #EE0000;  
font-weight: bold;  
}  
</style> 

 

延伸阅读:
分享几个jQuery优质星型评级插件