jQuery实现五星好评

简单实现五星评价

html代码：

<div class="box">
        <ul>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li class="text">非常好</li>
        </ul>
    </div>

css代码：

<style type="text/css">
    .box{
        width: 500px;
        margin: 100px auto;
    }
    .box ul{
        list-style: none;
    }

    .box ul li{
        position: relative;
        float: left;
        width: 50px;
        height: 42px;
        line-height: 42px;
    }
    .box ul li span{
        position: absolute;
        display: block;
        width: 44px;
        height: 42px;
    }
    .box ul li .star0{
        background: url(image/star0.png);
    }
    .box ul li .star1{
        background: url(image/star1.png);
    }

</style>

jQuery代码：

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    /* 鼠标单击 */
    $(".box ul li").click(function(){
        var txt = ['非常差','差','一般','好','非常好'];
        $(this).find(".star0").css("display","none");
        $(this).prevAll().find(".star0").css("display","none");
        $(this).nextAll().find(".star0").css("display","block");
        $(".box ul .text").html(txt[$(this).index()]);
    }) 
</script>