jquery raty 实现星星打分效果

jquery raty 实现星星打分效果

效果图：

js以及图片地址 自行引入：

核心代码：

html：

            <div class="clearfix" >
                <span class="f-l f-15 va-m">速度星级：</span>
                <div id="star-1" class="star-bar size-M f-l mr-10 va-m"></div>
                <strong id="result-1" class="f-l va-m"></strong>
            </div>
            <div class="clearfix" >
                <span class="f-l f-15 va-m">质量星级：</span>
                <div id="star-2" class="star-bar size-M f-l mr-10 va-m"></div>
                <strong id="result-2" class="f-l va-m"></strong>
            </div>
            <div class="clearfix">
                <span class="f-l f-15 va-m">态度星级：</span>
                <div id="star-3" class="star-bar size-M f-l mr-10 va-m"></div>
                <strong id="result-3" class="f-l va-m"></strong>
            </div>

js:

 $(function(){
        $("#star-1").raty({
            hints: ['1','2', '3', '4', '5'],//自定义分数
            starOff: 'iconpic-star-S-default.png',//默认灰色星星
            starOn: 'iconpic-star-S.png',//黄色星星
            path: '${tPath}/static/h-ui/images/star',//可以是相对路径
            number: 5,//星星数量，要和hints数组对应
            showHalf: true,
            targetKeep : true,
            click: function (score, evt) {//点击事件
                
                //第一种方式：直接取值
                $("#result-1").html('你的评分是'+score+'分');
            }
        });
        $("#star-2").raty({
            hints: ['1','2', '3', '4', '5'],//自定义分数
            starOff: 'iconpic-star-S-default.png',//默认灰色星星
            starOn: 'iconpic-star-S.png',//黄色星星
            path: '${tPath}/static/h-ui/images/star',//可以是相对路径
            number: 5,//星星数量，要和hints数组对应
            showHalf: true,
            targetKeep : true,
            click: function (score, evt) {//点击事件
                //第一种方式：直接取值
                $("#result-2").html('你的评分是'+score+'分');
            }
        });
        $("#star-3").raty({
            hints: ['1','2', '3', '4', '5'],//自定义分数
            starOff: 'iconpic-star-S-default.png',//默认灰色星星
            starOn: 'iconpic-star-S.png',//黄色星星
            path: '${tPath}/static/h-ui/images/star',//可以是相对路径
            number: 5,//星星数量，要和hints数组对应
            showHalf: true,
            targetKeep : true,
            click: function (score, evt) {//点击事件
                //第一种方式：直接取值
                $("#result-3").html('你的评分是'+score+'分');
            }
        });
    });

获取评分：$("#star-1").raty('score')