jquery.raty.js 评星插件的使用

需要实现一个五星好评的功能，所以找到了这个JQ插件，使用起来还算简单，在这里记录下使用的方式。

第一步：导入这个插件和压缩包中的img文件夹

<script type="text/javascript" src="/jquery.raty.min.js"></script>

第二步：需要使用评分功能的div

<table>
    <tbody>
        <tr>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>
        </tr>
    </tbody>
</table>

这里我使用table来控制位置，每一个td中的div标签都会代表一个五星评分区域，这里有6个评分区域

第三步：使用JQuery代码，设置这些div做为五星评分区域，并可以设置一些插件的属性

$(function() {
    
    $.fn.raty.defaults.path = '';
    
    $("td div").raty({
        space: false,
        click: null,
        hints: ['很差', '差', '一般', '好', '极好'] //鼠标放在图标上显示的文本
    });
    
    $("td div").each( function(index,element){
            $(this).raty({'score':'3',readOnly:true});   //设置点亮的星数 这里设置为3颗星星默认点亮，可以从后台获得对应项的分数来动态显示星星数，这里先写死。并使用只读属性，表示不能点选
　　　　　　　　/*　　　　　　　　　　
　　　　　　　　var val = $(this).raty('score');  //获取用户选择的值
　　　　　　　　if (typeof(val)=="undefined" || val.length==0){
　　　　　　　　　　　　val = 0;
　　　　　　　　}
　　　　　　　　*/
    });
    
});

<script type="text/javascript" src="/jquery.raty.min.js"></script>

更多的属性设置可以查看这里，也可以参照以下两个博客，介绍的也很清楚

https://www.cnblogs.com/aiiright/p/6011835.html

https://www.cnblogs.com/Wayou/archive/2012/10/05/jQueryRaty.html#home