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