Bootstrap 3 加半星 Star rating with half-stars

1. 全星，零星

<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