jquery Star Plugin, support page multiple use

I collect a jquery star plugin from the Internet, it only supports one page to use once, multiple use of words will conflict, not to the needs of my project, no way, can only modify it,

As follows:

CSS Required background Image:

Apart, paste code:

HTML code

<div class= "Xing" >

<span style= "Float:left" > Overall Rating: <font color= "#CC3300" size= "-1" >*</font></span><div

class= "Rating-wrap" >

<ul id= "Xing1" >

<li><a href= "javascript: data-rate-value=" data-hint= "very poor" title= "very poor" class= "One-star" >

</a></li>

<li><a href= "javascript:;" data-rate-value= "data-hint=" difference "title=" difference "class=" Two-stars ">

</a></li>

<li><a href= "javascript: data-rate-value=" data-hint= "OK" title= "class=" Three-stars ">

</a></li>

<li><a href= "javascript:;" data-rate-value= "data-hint=" good "title=" good "class=" Four-stars ">

</a></li>

<li><a href= "javascript:;" data-rate-value= "data-hint=" very good title= "very good" class= "Five-stars" >

</a></li>

</ul>

</div>

<span class= "Xing1" > click Stars to start scoring </span>

</div>

<divclass= "Xing" >

<span style= "Float:left" > Advertising effect: <font color= "#CC3300" size= "-1" >*</font></span><div

class= "Rating-wrap" >

<ulid= "Xing2" >

<li><a href= "javascript: data-rate-value=" data-hint= "very poor" title= "very poor" class= "One-star" >

</a></li>

<li><a href= "javascript:;" data-rate-value= "data-hint=" difference "title=" difference "class=" Two-stars ">

</a></li>

<li><a href= "javascript: data-rate-value=" data-hint= "OK" title= "class=" Three-stars ">

</a></li>

<li><a href= "javascript:;" data-rate-value= "data-hint=" good "title=" good "class=" Four-stars ">

</a></li>

<li><a href= "javascript:;" data-rate-value= "data-hint=" very good title= "very good" class= "Five-stars" >

</a></li>

</ul>

</div>

<span class= "Xing2" > click Stars to start scoring </span>

</div>

JS Code

<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 ("Click Stars to start scoring");

}

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")). The HTML ($ (this). attr ("Data-hint")). AddClass ("Active-hint");

})

})

</script>

CSS Code

<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)/**-----Star Plugin background image----**/
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>

Note: CSS code from the project decomposition, there is a small part of the post, you can modify the CSS style according to their own needs

jquery Star Plugin, support page multiple use