评价部分中星级评价简单的实现

说明：主要是想总结一下jquery中的知识，这个例子中用到的主要是jquery中prevall()方法和nextAll()方法进行元素集合的遍历，效果如下图：

使用的星星图片

      

jquery部分
 $(function(){
    $(".star01 li").addClass("xing_nomarl");
    $(".star01 li").click(function(){
        $(".star01 li").addClass("xing_nomarl");
        $(this).addClass("xing_select");
        $(this).prevAll().addClass("xing_select");
        $(this).nextAll().removeClass("xing_select").addClass("xing_nomarl");
        var star_number = $(this).prevAll().length+1;
        //alert(star_number);
    })
});
 
 html部分
 <ul class="star">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

css部分
.star{
    display:inline-block;
    padding-left:0;
    margin-bottom: -5px;
    }
.star li{
    position:relative;
    padding-left:10px;
    float:left;
    cursor:pointer;
}
.xing_nomarl{
    18px;
    height:18px;
    display:block;
    margin:0 5px;
    background:url(xingxing_nomarl.png) no-repeat left center;
    background-size:100%;
    overflow:hidden;
    }
.xing_select{
    18px;
    height:18px;
    display:block;
    margin:0 5px;
    background:url(xingxing_select.png) no-repeat left center;
    background-size:100%;
    overflow:hidden;
    }