评分---五星好评

CSS:

#score1 i {
    vertical-align: middle;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('图片地址') no-repeat center center;
    background-size: cover;
}

#score1 i.on {
    background-image: url('图片地址');
}

HTML：

<span id="score1">
    <i></i><i></i><i></i><i></i><i></i>
</span>

JavaScript：

    /**
     * [score 评分]
     * @param  {[String]} scoreId   [评分Id]
     * @param  {[String]} extentStr [需要变成实体的星星的样式class]
     * $(scoreId).val()　　[访问分数]
     */
    function score(scoreId, extentStr) {

        scoreId = "#" + scoreId;

        $(scoreId + " i").hover(function() { // 鼠标移入，未确定选择分数时

            for (var i = 0; i <= $(this).index(); i++) {

                $(scoreId + " i").eq(i).addClass(extentStr); // 实星星

            }

            $(scoreId + " i").click(function() { // 点击评分，确定好分数后无法更改

                for (var i = 0; i <= $(this).index(); i++) {

                    $(scoreId + " i").eq(i).addClass(extentStr);

                }
                 
                $(scoreId).val($(this).index()+1);          

                $(scoreId + " i").unbind(); // 清除移入移出

            });

        }, function() { // 鼠标移出

            $(scoreId + " i").removeClass(extentStr); // 描线星星

        });

    }

    score("score1", "on");