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;}

jquery实现星星评分

标签：

原文地址：http://www.cnblogs.com/wildorchid/p/4692793.html