評分條的實現

效果圖：

<style>
#box{width:140px;height:27px;}
.pox{width:25px;height:25px;border:1px solid #ccc;float:left;}
</style>
<div id="box">
    <div class="pox"></div>
    <div class="pox"></div>
    <div class="pox"></div>
    <div class="pox"></div>
    <div class="pox"></div>
</div>
<span>請評分</span>
<script>
var Right=true;//能否評分的依據
for(i=0;i<$('.pox').size();i++){
    $('.pox').eq(i).mouseenter(function(e) {
        if(Right){
            var index=$(this).index();
            $(this).prevUntil('#box').css('background','red');
            $(this).css('background','red');
            $(this).nextAll().css('background','transparent');

            switch(index){
                case 0:
                    $('span').html('很差');                  break;
                case 1:
                    $('span').html('較差');                  break;
                case 2:
                    $('span').html('還行');                  break;
                case 3:
                    $('span').html('推薦');                  break;
                case 4:
                    $('span').html('力薦');                  break;
            };

            $('.pox').eq(index).click(function(e) {
                $('span').html('您已評分!分數爲'+(index+1)+'分');      
                Right=false;
            });

            $('#box').mouseleave(function(e) {
                if(Right){
                        $(this).find('div').css('background','transparent');
                        $('span').html('請評分');
                }
            });
        }

    });
}

</script>