bootstrap-star-rating星星插件使用介绍

直接上干货

官网：https://plugins.krajee.com/star-rating

HTML

	<form>
                <div class="rating-lists">
                    <label class="title" for="comment">大神评分：</label>
                    <input class="rating rating1" id="1" name="comment"  min="0" max="5" step="1" data-size="sm" value="0" >
                </div>
                <div class="rating-lists">
                    <label class="title" for="comment">教学互动：</label>
                    <input class="rating rating2" id="2" name="comment"  min="0" max="5" step="1" data-size="sm" value="0" >
                </div>
                <div class="rating-lists">
                    <label class="title" for="comment">服务速度：</label>
                    <input class="rating rating3" id="3" name="comment"  min="0" max="5" step="1" data-size="sm" value="0" >
                </div>
                <div class="rating-lists">
                    <label class="title" for="comment">满意程度：</label>
                    <input class="rating rating4" id="4" name="comment"  min="0" max="5" step="1" data-size="sm" value="0" >
                </div>
            </form>

JS

<script>
    $('.rating').rating({
        min: 0, /*星星的最小数值*/
        max: 5, /*星星的最大数值*/
        step: 1, /*表示增加减少的数量*/
        size: 'sm', /*星星的大小 有lg,sm,xl,xs*/
        showClear: false, /*是否显示清除按钮*/
        disabled: false, /*不可用设置 默认false可以点击  true禁止点击*/
        readonly:true,  /*只读模式 跟上面一样效果，不知道啥区别*/
        starCaptions: {1: '1分 太坑', 2: '2分 凑合', 3: '3分 一般', 4: '4分 很好', 5: '5分 非常好'},
        starCaptionClasses: {1: 'text-danger', 2: 'text-warning', 3: 'text-info', 4: 'text-primary', 5: 'text-success'}
   });
   
   /*这里是更改评分后，星星的打分显示 .rating('update',3)这样*/
   $('.rating1').rating({ }).rating('update',3);
   $('.rating2').rating({ }).rating('update',2);
   $('.rating3').rating({ }).rating('update',4);
   $('.rating4').rating({ }).rating('update',5);
 
</script>

既然是bootstrap插件，星星图标记得引入bootstrap字体文件，当然也可以引譬如font-awesome等。