今天我們來學習如何在使用jquery.raty.js插件的過程中獲取星級評分的值。
首先,我們需要在頁面中導入jquery庫和jquery.raty.js插件:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.raty.min.js"></script>
在html頁面中添加一個星級評分的div元素,在div元素上調用raty()方法即可生成星級評分組件。我們設置組件的大小為40px,共5個星級評分:
<div id="rating"></div>
<script>
$("#rating").raty({
size: 40,
starOff: "star-off.png",
starOn: "star-on.png",
starHalf: "star-half.png",
score: 3,
number: 5
});
</script>
我們可以通過score屬性來設置評分的初始值,range屬性來設置評分的取值范圍。比如,要將評分的取值范圍設為0.5到5,步進為0.5,可以這樣設置:
<div id="rating"></div>
<script>
$("#rating").raty({
size: 40,
starOff: "star-off.png",
starOn: "star-on.png",
starHalf: "star-half.png",
score: 3,
number: 10,
step: 0.5,
range: [0.5, 5]
});
</script>
在用戶對星級評分進行操作后,我們可以通過調用raty()方法獲取當前的評分值,將值賦予變量score:
var score = $("#rating").raty("score");
console.log(score);
代碼解釋:
1. 通過jQuery選擇器選擇星級評分的div元素。
2. 調用raty()方法,并傳遞"score"參數,獲取當前評分值。
3. 通過console.log()方法輸出score的值。
這樣,我們就可以在jquery.raty.js插件中獲取星級評分的值啦!