java中星级评价插件 jquery星级评分

不得不说，jquery实在太强大了。星星打分，本打算用switch case来遍历了，好在只有五颗星。想想不甘心，去查了下jquery的API，果然找到两个超级实用的选择器：prevAll和nextAll。点击某颗星时，之前的星都填满，之后的星为空。这两个选择器就像是专为此种情况而生的。星星打分的功能就这样轻松实现了。

上图：

上代码：

HTML：
	    <table class="tab_star">
	    	<tr>
	    		<td>1.口齿是否清楚口齿是否口齿是否清楚 </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.口齿是否清楚口齿是否口齿是否清楚 </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.口齿是否清楚口齿是否口齿是否清楚 </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.口齿是否清楚口齿是否口齿是否清楚 </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;}