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> 
<divclass="xing"> 
<span style="float: left">广告效果:<font color="#CC3300"size="-1">*</font></span><div 
class="rating-wrap"> 
<ulid="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>

css代码

<style> 
.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>

注：css代码从项目中分解出，有一小部分没贴完，大家可以根据自己的需求修改css style