實作打星功能
STEP 1:製作星星圖示
這個很簡單,去 Font Awesome 之類的網站找個 Icon 就行了。當然如果你想要手刻星星,我也是不反對,只是這裡不示範就是了 XD
<!-- 下方 JS 會判斷輸入的星數 -->
<div class="h5 mb-0">
<a href="#" class="text-decoration-none commentStar star-count-1">
<i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
</a>
<a href="#" class="text-decoration-none commentStar star-count-2">
<i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
</a>
<a href="#" class="text-decoration-none commentStar star-count-3">
<i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
</a>
<a href="#" class="text-decoration-none commentStar star-count-4">
<i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
</a>
<a href="#" class="text-decoration-none commentStar star-count-5">
<i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
</a>
</div>
STEP 2:JavaScript 判斷輸入的星數
我們用 JavaScript 綁定每個星星 Icon,當點擊到某一顆星星時,就將它前方的星星(包含點到的那顆)改成紅色 bg-danger
,後方的星星改為灰色。
如此一來,我們就完成星級評鑑功能的顯示效果囉!
let starIcon = document.querySelectorAll('.commentStar i');
for (let i = 0; i < starIcon.length; i++) {
starIcon[i].addEventListener(
'click',
function(event) {
event.preventDefault();
console.log('preventDefault will stop you from checking this checkbox!');
console.log(this);
for (let j = 0; j <= i; j++) {
starIcon[j].classList.add('bg-danger');
console.log('第 ' + j + ' 號星 加上紅色');
}
for (let k = 4; k > i; k--) {
starIcon[k].classList.remove('bg-danger');
console.log('第 ' + k + ' 號星 去除紅色');
}
var starNumber = i + 1; // starNumber = 傳到資料庫的星數
console.log('評論星數為 ' + starNumber);
},
false
);
}
至於最後加上 starNumber
這兩行 Code,是要讓遠端資料庫(例如:Firestore)能夠得到這個 number
型別的資料。
例如:客戶若評分為五星,則將 5 這個數字傳回 Database,之後就能把 5 這個星數等級再應用於其他頁面上了。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫