小星星評分的css和js代碼實現

实现起来很灵活，代码如下：

<style>
    .star span{
        font-size: 2em;
        cursor: pointer;
    }
    .star .red{
        color: red;
    }
</style>

<h3>示例1：</h3>
<div class="star exp1">
    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
    <i></i>
    <input type="hidden" name="star" value="1">
</div>
<div class="star exp6">
    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
    <i></i>
    <input type="hidden" name="star" value="3">
</div>
<div class="star exp4">
    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
    <i></i>
    <input type="hidden" name="star" value="5">
</div>
<div class="star exp5">
    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
    <i></i>
    <input type="hidden" name="star" value="7">
</div>
<h3>示例2：</h3>
<div class="star exp2">
    <span>W</span><span>W</span><span>W</span><span>.</span><span>E</span><span>B</span><span>C</span><span>M</span><span>S</span><span>.</span><span>C</span><span>O</span><span>M</span>
    <i></i>
    <input type="hidden" name="star" value="3">
</div>
<h3>示例3：</h3>
<div class="star exp3">
    <span>易</span><span>贝</span><span>内</span><span>容</span><span>管</span><span>理</span><span>系</span><span>统</span><span>，</span><span>基</span><span>于</span><span>T</span><span>P</span><span>5</span><span>开</span><span>发</span><span>！</span>
    <i></i>
    <input type="hidden" name="star" value="3">
</div>

<script>
    $(function() {
        function stars(selecter){
            var stars = $(selecter + ' span');
            var star_tips_dom = $(selecter + ' i');
            var star_dom = $(selecter + '');
            var star_input_dom = $(selecter + ' input');
            stars.mouseover(function() {
                var ind = $(this).index();
                $.each(stars, function(index, val) {
                    if ($(this).index() <= ind) {
                        $(this).addClass('red');
                    }else{
                        $(this).removeClass('red');
                    }
                });
                star_tips_dom.html(ind + 1 + ' 分');
            });
            stars.bind('click', function(event) {
                star_input_dom.val($(this).index()+1);
            });
            star_dom.mouseout(function() {
                var ind = star_input_dom.val();
                $.each(stars, function(index, val) {
                    if ($(this).index() < ind) {
                        $(this).addClass('red');
                    }else{
                        $(this).removeClass('red');
                    }
                });
                star_tips_dom.html(ind + ' 分');
            });
            // 初始化
            stars.eq(Number(star_input_dom.val())-1).trigger('mouseout');
        }
        stars('.exp1');
        stars('.exp2');
        stars('.exp3');
        stars('.exp4');
        stars('.exp5');
        stars('.exp6');
        stars('.exp7');
    });
</script>