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'); } } }); });