Jquery star plug-in, supporting multiple times on the page, jquery star

Jquery star plug-in, supporting multiple times on the page, jquery star

I collect from the InternetA jquery star plug-inIt can only be used on one page once. If it is used multiple times, a conflict may occur, and it cannot meet the requirements of my project,

As follows:

 

 

 

Background image for css:

 

 

The post code is as follows:

Html code

<Div class = "xing">

<Span>
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" 2.16.html ("click the stars to start scoring ");

}

Else

{

$ (". "+ $ (This ). parent (). parent (). attr ("id" paipai.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" paipai.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);/** ----- background image of the star Plug-In ----**/
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 {
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: The css code is extracted from the project. A small part of the code is incomplete. You can modify the css style as needed.