评分条的实现

效果图：

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