jquery Star Scoring Effects

Write at the beginning:

I used to say that I learned jquery well, but I've never done anything, and I've been looking for all kinds of reasons. Recently really want to learn jquery, because my family that has always been the encouragement, I decided to work hard, good cheer. At present the level is limited (rookie), also invites everybody to contain more.

Case:

Final effect:

1. First is the HTML part, the whole is a large div, mainly contains span, UL, p Tags:

2.CSS Style structure

3.jquery Code

Through this case, write your own study notes, at the beginning of the time do not know how to judge the current selection is the number of stars, through the baby to explain the example (Xiao Liu home has 3 sons, there is an aunt met Xiao Liu asked: "Xiao Liu you at home the first few ah?" If Xiao Liu is the second, then he must answer is the second, he can clearly understand the $ (this). Index (), which is the value of the current Li, and the index value is counted starting at 0, so the value named Currentindex is $ (this). Index () + 1, when the mouse moved to a star, the star and the front of the star will be lit up. Here the each () method is to traverse all Li in ul, if $ (this) is <currentindex when the index () is lit.

It's hard for me to write this case: 1. The traversal of the index using 2.each () does not know 3. Do not know how to judge the current selection is the number of stars, and how to let the current selection and the previous star lit up.

PS: Thank you for my family has been to give their patience to explain, thank you baby.

jquery Star Scoring Effects