星级评分demo

css

<style>
    .star_score {
        float: left;
    }
    .star_score li {
        display: inline-block;
        width: 35px;
        height: 24px;
        background: url(./image/starky.png) no-repeat;
        background-size: 24px 24px;
    }
    .star_score li.on {
        background: url(./image/starsy.png) no-repeat;
        background-size: 24px 24px;
    }
    .star_block > span {
        padding-left: 20px;
        line-height: 24px;
    }
</style>

html

<p class="title">星级评分</p>
<div class="col-sm-9 star_block clearfix">
	<ul class="star_score"></ul>
	<input hidden name="fields(star_score)" />
	<span style="float: left;">您的评分：<span class="fenshu"></span> 分</span>
	<span class="attitude"></span>
</div>

js

starScoreFun($(".star_block"), {
	scoreInput:'[name="fields(star_score)"]'
});

// 星级评分
function starScoreFun(object,opts){
    // 默认属性
    var defaults={
        fen_d:35,  // 每个li的宽度
        ScoreGrade:5,  // li的个数
        types:["特别差",
            "很差",
            "一般",
            "很好",
            "非常好"],
        nameScore:"fenshu",
        parent:"star_score",
        attitude:"attitude",
		scoreInput:""
    };
    var options=$.extend({},defaults,opts);
    var countScore=object.find("."+options.nameScore);  // 找到名为“fenshu”的类
    var startParent=object.find("."+options.parent);    // 找到名为“star_score”的类
    var atti=object.find("."+options.attitude);    // 找到名为“attitude”的类
    var scoreInput=object.find(options.scoreInput);     // 分数存值input

    var now_cli;
    var atu;
    var fen_d=options.fen_d;     // 每个li的宽度
    var len=options.ScoreGrade;  // 把li的个数赋值给len
    startParent.width(fen_d*len); //包含li上级的div盒子的宽度
    var preA=(5/len);
    for(var i=0;i<len;i++){
        var newSpan=$("<li></li>");
        newSpan.appendTo(startParent);
    }
    startParent.find("li").each(
        function(index,element){
            $(this).click(function(){
                now_cli=index;                   // 当前li的索引值
                show(index,$(this));
            });
            $(this).mouseenter(function(){
                show(index,$(this));
            });
            $(this).mouseleave(function(){
                if(now_cli>=0){
                    var scor=preA*(parseInt(now_cli)+1);         // 评分
                    startParent.find("li").removeClass("on");
                    for(var i = 0; i < now_cli+1; i++) {
                        startParent.find("li").eq(i).addClass("on");
                    }
                    atu=options.types[parseInt(now_cli)];       // 用户态度
                    atti.text(atu);                        // 显示用户态度
					countScore.text(scor);
					scoreInput.val(scor);
                }else{
                    startParent.find("li").removeClass("on");
                    atti.text("");                        // 显示用户态度
					countScore.text("");
					scoreInput.val("");
                }
            })
        }
    );

    // show方法
    function show(num){
        var n=parseInt(num)+1;
        var scor=preA*n;                        // 评分
        atu=options.types[parseInt(num)];       // 用户态度
        startParent.find("li").removeClass("on");
        for(var i = 0; i < num+1; i++) {
            startParent.find("li").eq(i).addClass("on");
        }
        countScore.text(scor);                  // 显示评分
        scoreInput.val(scor);
        atti.text(atu);                        // 显示用户态度
    }
}