jq星星评分

html代码

<div class="make_mark">
                <h5>请为这次服务打分</h5>
                <div class="mark_star">
                    <div>
                        <span class="star">
                            <b class="gray"></b>
                            <b class="gray"></b>
                            <b class="gray"></b>
                            <b class="gray"></b>
                            <b class="gray"></b>
                        </span>
                        <p>出品质量</p>
                        <input type="hidden" name="quality_point" value="" class="evaluate">
                    </div>
                    <div>
                        <span class="star">
                            <b class="gray"></b>
                            <b class="gray"></b>
                            <b class="gray"></b>
                            <b class="gray"></b>
                            <b class="gray"></b>
                        </span>
                        <p>服务态度</p>
                        <input type="hidden" name="attitude_point" value="" class="evaluate">
                    </div>
                    <div>
                        <span class="star">
                            <b class="gray"></b>
                            <b class="gray"></b>
                            <b class="gray"></b>
                            <b class="gray"></b>
                            <b class="gray"></b>
                        </span>
                        <p>制作时长</p>
                        <input type="hidden" name="time_point" value="" class="evaluate">
                    </div>
                </div>
            </div>

css代码

/*星星*/
.star{
    display: inline-block;
}
.star b{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 3px;
}
.star b.yellow{
    background: url("../../../statics/images/bootstrap/star_yellow.png") center center no-repeat;
}
.star b.gray{
    background: url("../../../statics/images/bootstrap/star_gray.png") center center no-repeat;
}
.star b.yellow_half{
    background: url("../../../statics/images/bootstrap/star_yellow_half.png") center center no-repeat;
}

js代码

//评价星打分
        $(".container .make_mark .star").each(function(){
            $(this).find('b').click(function(){
                var _index = $(this).index();
                $(this).parent('.star').parent().find('.evaluate').val(parseInt(_index+1));
                for(var i = 0;i<=_index;i++){
                    $(this).parent('.star').find('b').eq(i).attr('class','yellow');
                    for(var j = _index+1; j<=4 ; j++){
                        $(this).parent('.star').find('b').eq(j).attr('class','gray');
                    }
                }
            });
        });