jquery achieves star ratings

I have to say, jquery is too powerful. Star rating, this is intended to use switch case to traverse, fortunately, only five stars. Think about not reconciled, to check the next jquery API, sure enough to find two Super practical selector: Prevall and Nextall. When you click on a star, the previous stars are filled, and then the stars are empty. These two selectors are like those that were created for this situation. The star scoring function is so easy to achieve.

：

On the code:

HTML：
<table class= "Tab_star" >
<tr>
<td>1. Is the articulate articulate whether the Lisp is clear </td>
<td>
<span class= "star sel" title= "1" ><i></i></span>
<span class= "star" title= "2" ><i></i></span>
<span class= "star" title= "3" ><i></i></span>
<span class= "star" title= "4" ><i></i></span>
<span class= "Star" title= "5" ><i></i></span>
</td>
</tr>
<tr>
<td>2. Is the articulate articulate whether the Lisp is clear </td>
<td>
<span class= "star sel" title= "1" ><i></i></span>
<span class= "star" title= "2" ><i></i></span>
<span class= "star" title= "3" ><i></i></span>
<span class= "star" title= "4" ><i></i></span>
<span class= "Star" title= "5" ><i></i></span>
</td>
</tr>
<tr>
<td>3. Is the articulate articulate whether the Lisp is clear </td>
<td>
<span class= "star sel" title= "1" ><i></i></span>
<span class= "star" title= "2" ><i></i></span>
<span class= "star" title= "3" ><i></i></span>
<span class= "star" title= "4" ><i></i></span>
<span class= "Star" title= "5" ><i></i></span>
</td>
</tr>
<tr>
<td>4. Is the articulate articulate whether the Lisp is clear </td>
<td>
<span class= "star sel" title= "1" ><i></i></span>
<span class= "star" title= "2" ><i></i></span>
<span class= "star" title= "3" ><i></i></span>
<span class= "star" title= "4" ><i></i></span>
<span class= "Star" title= "5" ><i></i></span>
</td>
</tr>
</table>

JS:

$ (document). Ready (function () {

$ ("Span.star"). Bind ("click", Function () {
$ (this). Parent ("TD"). FIND ("Span.star"). Removeclass ("sel");
$ (this). addclass ("sel");
$ (this). Prevall (). addclass ("sel");
});

});

CSS:

Span.star I{display:inline-block;background:url (.. /images/star.png) No-repeat Center Center; background-size:20px 20px; width:24px; height:20px; padding:0; margin:0;}
Span.star.sel I{display:inline-block;background:url (.. /images/star_sel.png) No-repeat Center Center; background-size:20px 20px; width:24px; height:20px; padding:0; margin:0;}

jquery achieves star ratings