今天给大家分享一个星级评分的插件，如下图所示：

当我们选中几星时，会反馈给input一个对应的数值。这里给大家推荐的是RatingStars.js

我们还可以搭配字体图标进行自定义星星的图案和效果。

使用方法：

在页面中引入jQuery和jquery.rating-stars.js

Html结构：

插件中通过font-awsome字体图标来构建星星，基本的HTML结构如下：

<div class="rating-stars block" id="another-rating">
    <input type="hidden" class="rating-value" name="stars-value" id="stars-value" value="2">
    <!-- set the input-value to set the default value -->
    <div class="rating-stars-container">
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
    </div>
</div>

也可以根据自己的需要自定义字体图标，我在项目中引用的是阿里巴巴矢量图库里的图标，这里就没有引用font-awsome字体图标，用的是Unicode 引用方法调用的图标，如下图

<div class="rating-stars-container">
                    <div class="rating-star">
                        <i class="iconfont fa-star">&#xe870;</i>
                    </div>
                    <div class="rating-star">
                        <i class="iconfont fa-star">&#xe870;</i>
                    </div>
                    <div class="rating-star">
                        <i class="iconfont fa-star">&#xe870;</i>
                    </div>
                    <div class="rating-star">
                        <i class="iconfont fa-star">&#xe870;</i>
                    </div>
                    <div class="rating-star">
                        <i class="iconfont fa-star">&#xe870;</i>
                    </div>
       </div>

Js部分：

<script>
        var ratingOptions = {
            selectors: {
                starsSelector: '.rating-stars',
                starSelector: '.rating-star',
                starActiveClass: 'is--active',
                starHoverClass: 'is--hover',
                starNoHoverClass: 'is--no-hover',
                targetFormElementSelector: 'input[name=ReporterName]'
            }
        };
        $(".rating-stars").ratingStars(ratingOptions);
</script>

其中：$(".rating-stars").ratingStars(); 

通过ratingStars()方法来初始化该jquery星级评分插件

点击进行下载