jq实现评星功能功能

评星功能，有些网站很需要评星功能，比如说商城，再比如评分，都是可以使用的，这次我使用了jq做了一个比较简单的评星功能，希望能帮得上需要的人。最下方有一个运行按钮，可以直接在线运行哦。JQ是使用了cdn，有可能会失效，如果失效了，请复制到本地测试也行。

其实这个也可以使用背景图来做的，只要利用好JQ生成的两个class就可以（v-on和on），v-on是hover的时候临时添加的，on是最终的选择，程序可以判断带on的有几个就可以得到评星的等级了。

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<div class="js_star">
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $js_star = $('.js_star');
        $js_star_span = $('.js_star span');
        $js_star_span.hover(function(){
            $(this).prevAll().addClass('v-on');
            $(this).addClass('v-on');
            $(this).nextAll().removeClass('v-on');
        },function(){
            $js_star_span.removeClass('v-on');
        });
        $js_star_span.click(function(){
            $(this).prevAll().addClass('on');
            $(this).addClass('on');
            $(this).nextAll().removeClass('on');
        });
    });
</script>
<style type="text/css">
    *{ margin:0; padding:0; font-style: normal;}
    .js_star{ height:36px; line-height:36px; width:150px; text-align:center; margin:0 auto;}
    .js_star span{ display:block; float:left; width:30px; font-size:26px; color:#999; cursor:pointer;}
    .js_star span.on{ color:#FF6600;}
    .js_star:hover span.on{ color:#999;}
    .js_star:hover span.v-on{ color:#FF6600;}
</style>

运行