1、html

<div class="box" id="star0" score="">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</div>
<div id="score"></div>

2、css

.box {
    width:200px;
    height:40px;
}
li {
    height:40px;
    width:40px;
    background:url(http://www.jq22.com/tp/537e9b2e-b92f-4dd2-ae1a-0c708827ea99.png);
    background-repeat:no-repeat;
    background-size:25px 25px;
    list-style:none;
    background-position:center;
    float:left;
    cursor:pointer;
}

3、js

$(".box li").click(function() {
    var index = $(this).index();
    $(this).parent().attr("score", index + 1);//分数设置
    var parentId = $(this).parent().attr("id");
    $("#" + parentId).find("li").css("background-image", "url('http://www.jq22.com/tp/537e9b2e-b92f-4dd2-ae1a-0c708827ea99.png')");
    for (var i = 0; i <= index; i++) {
        $("#" + parentId).find("li").eq(i).css("background-image", "url('http://www.jq22.com/tp/da9927e6-d099-45d8-a47c-00c882bcbdfa.png')");
    }
    var score = $("#" + parentId).attr("score");
    $("#score").text("您选择的分数是:" + score + "分");
});

运行效果：