html 星星评分源码

css

.tip-word{margin-left:20px;color:red;}
.stars{margin: 8px;height:20px;}
.stars span{ float: left; line-height: 15px; }
.stars i{width: 15px; height: 15px; line-height: 15px; float: left; margin-right: 5px;background-position:center; background-image:url(images/star_gray.png);background-size: 100%; color: #fff; text-align: center; cursor:Pointer; font-style: normal;}
.stars .on{background-image:url(images/star.png);background-position:center;background-size: 100%;}

html

<div class="stars">
    <span>评价：</span>
    <for start="0" end="5" comparison="lt" step="1" name="i" >
        <i class="on"></i>
    </for>
    <span class="tip-word">非常好</span>
    <input id="point" type="hidden" name="point" value="5"/>
</div>

JS

<script>
    $(function(){
        /*
        * 鼠标点击，该元素包括该元素之前的元素获得样式,并给隐藏域input赋值
        * 鼠标移入，样式随鼠标移动
        * 鼠标移出，样式移除但被鼠标点击的该元素和之前的元素样式不变
        * 每次触发事件，移除所有样式，并重新获得样式
        * */
        var tip_word = ["非常差","差","一般","好","非常好"];
        var stars = $('.stars');
        var Len = stars.length;
        //遍历每个评分的容器
        for(i=0;i<Len;i++){
            //每次触发事件，清除该项父容器下所有子元素的样式所有样式
            function clearAll(obj){
                obj.parent().children('i').removeClass('on');
            }
            stars.eq(i).find('i').click(function(){
                var num = $(this).index();
                clearAll($(this));
                //当前包括前面的元素都加上样式
                $(this).addClass('on').prevAll('i').addClass('on');
                //给隐藏域input赋值
                $(this).siblings('input').val(num);
                //文字提示
                $(this).siblings('.tip-word').html(tip_word[num-1]);
            });
            stars.eq(i).find('i').mouseover(function(){
                var num = $(this).index();
                clearAll($(this));
                //当前包括前面的元素都加上样式
                $(this).addClass('on').prevAll('i').addClass('on');
                //文字提示
                $(this).siblings('.tip-word').html(tip_word[num-1]);
            });
            stars.eq(i).find('i').mouseout(function(){
                clearAll($(this));
                //触发点击事件后input有值
                var score = $(this).siblings('input').val();
                //默认最少一个
                if (score == 0)score = 1;
                //文字提示
                $(this).siblings('.tip-word').html(tip_word[score-1]);
                //当前包括前面的元素都加上样式
                for(i=0;i<score;i++){
                    $(this).parent().find('i').eq(i).addClass('on');
                }
            });
        }
    })
</script>