jquery Imitation Taobao commodity evaluation

Recently do project to do a product evaluation function, I went directly to Taobao to study, can look dizzy, still do not know how he did it, so the picture buckle down, wrote a, and then show me how to do, we have different ways to realize how to share it.

After research, I found that on the scripting event, it was divided into three events, the mouse moved into the event, the mouse left the event and the Click event. Move in let the mouse move into the stars and before the stars are discolored, click on the basis of the move to save the current click of the star position, leaving the return to the last click of the Star. From the style, these stars can share a picture, switch the stars when the part of the picture to show it.

Show demo here only three stars, the stars on the right side of the text hint also do not get. There is no link with the link tag to put the stars, the use of links has a benefit is that if you click on the stars to trigger the operation of the server, such as clicking on the stars directly complete the evaluation operation, you can directly use, and then use a hidden input to store the last click of the star value:

<div id= "Rating-star" >
<a href= "#" >0</a>
<a href= "#" >1</a>
<a HRE f= "#" >2</a>
<input type= "hidden" id= "Goodlevel"/>
</div>

Then give Rating-star and link a style, switch the key of the picture only need to modify background-position on it:

#rating-star {
margin:50px
}

#rating-star a {
background:url (commentstar.png) no-repeat 0-90px;
Display:inline-block;
height:23px;
Text-indent: -999em;
width:23px;
}

The final script is the key:

$ (' #rating-star '). On (' Click ', ' a ', function () {
$ (' #goodLevel '). Val (this.innerhtml);
}. On (' MouseEnter ', ' a ', function () {
Setstar (this);
}. On (' MouseLeave ', ' a ', function () {
var level = $ (' #goodLevel '). Val ();
var $stars = $ (' #rating-star > A ');
if (level = = ") {
$stars. CSS (' background-position ', ' 0-90px ');
} else {
Setstar ($stars [level]);
}
});

function Setstar (Star) {
var $this = $ (star);
var level = $this. html ();
var n;
if (level = = ' 2 ') {
n = ' 0-30px ';
else if (level = ' 1 ') {
n = ' 0 0 ';
} else {
n = ' 0-60px ';
}
$this. Prevall (). Andself (). CSS (' background-position ', n);
$this. Nextall (). CSS (' background-position ', ' 0-90px ');
}

Here it is necessary to explain my thinking, you can see that the click event is just assigning values to the hidden controls, did not do other things, the original click event is to change the picture, this thing I found the mouse moved into the event has been done, so I will not repeat, and then you will find the mouse to move in and leave the final call to the Setstar function, The method is actually to the incoming stars and his previous stars into the corresponding pictures, the star after the introduction of the star into a color-free star, in fact, Setstar can also be the original HTML object of the digital subscript, this can also be achieved with jquery slice. Some comrades may not know what ' 0-30px ' is all about, in fact, ' 0 0 ' is in the original default picture display, -30px meaning is on the y-axis to move the picture up 30 pixels, so that the link size is limited to 23px for a long time, we see is the praise picture, ' 0 0 ' corresponding is in the picture, ' 0-60px ' corresponding is the difference evaluation picture, ' 0-90px ' corresponds to is not yet evaluated picture. What is the benefit of synthesizing a picture of the original four pictures, you can reduce the number of requests, write code is also more convenient, it is estimated that the script performance will be better.

give it a shot yourself .