- 全星,零星
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
2. 全星,半星,零星
<div class="ratings">
<p class="star-rating" data-rating="4.33">
<i class="fa fa-star" data-prev-rating-class="fa fa-star"></i>
<i class="fa fa-star" data-prev-rating-class="fa fa-star"></i>
<i class="fa fa-star" data-prev-rating-class="fa fa-star"></i>
<i class="fa fa-star-half-full" data-prev-rating-class="fa fa-star-half-full"></i>
<i class="fa fa-star-o" data-prev-rating-class="fa fa-star-o"></i>
</p>
</div>
3. 全星,半星,零星, 可点击
<div class="container" style="margin-top:30px">
<h3 class="text-center">You can display half stars<br><small>while mouse-over working with whole stars as expected!</small></h3>
<p class="text-center">
<a class="btn btn-danger btn-xs star-rating" data-rating="4.33">
<i class="fa fa-star" data-prev-rating-class="fa fa-star"></i>
<i class="fa fa-star" data-prev-rating-class="fa fa-star"></i>
<i class="fa fa-star" data-prev-rating-class="fa fa-star"></i>
<i class="fa fa-star" data-prev-rating-class="fa fa-star"></i>
<i class="fa fa-star-half-full" data-prev-rating-class="fa fa-star-half-full"></i>
</a>
</p>
<h4 class="text-center">Mouse over to see the function</h4>
<p class="text-center">
<a class="btn btn-primary btn-xs star-rating" data-rating="2.33">
<i class="fa fa-star" data-prev-rating-class="fa fa-star"></i>
<i class="fa fa-star" data-prev-rating-class="fa fa-star"></i>
<i class="fa fa-star-half-full" data-prev-rating-class="fa fa-star-half-full"></i>
<i class="fa fa-star-o" data-prev-rating-class="fa fa-star-o"></i>
<i class="fa fa-star-o" data-prev-rating-class="fa fa-star-o"></i>
</a>
</p>
<p class="text-center">Notice the data-rating attribute as well as prev-rating-star attributes.</p>
<p class="text-center">This snippet allows you to show star rating with half-star precision preserving the expceted whole-star mouse effect!</p>
</div>
$(document).ready(function () { $('.star-rating i').hover(function () { $(this).prevAll().removeClass('fa-star-o fa-star-half-full').addClass('fa-star'); $(this).removeClass('fa-star-o fa-star-half-full').addClass('fa-star'); $(this).nextAll().addClass('fa-star-o').removeClass('fa-star fa-star-half-full'); }, function () { // }); $('.star-rating').hover(function () { // }, function () { $(this).children('i').each(function () { $(this).removeClass('fa-star-o fa-star-half-full') $(this).attr('class', $(this).attr('data-prev-rating-class')); }); }); });
原文/转自:Bootstrap 3 加半星 Star rating with half-stars