純 JavaScript 的星級評分功能

最近製作的 Project 要求在商品頁加入評論功能,其中有個功能叫做星級評鑑,就是客戶可以給商品打幾顆星的概念,這在各個網站都很常見,但我之前其實沒有做過。
接著在實作時,接連試了好幾個以 CSS 為主的呈現手法,但最後還是回歸於使用 JavaScript 來完成,因為我覺得 JavaScript 還是比較容易做出這些效果的,以純 CSS 完成對我而言還真有點複雜。

實作打星功能

STEP 1:製作星星圖示

這個很簡單,去 Font Awesome 之類的網站找個 Icon 就行了。當然如果你想要手刻星星,我也是不反對,只是這裡不示範就是了 XD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 下方 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,後方的星星改為灰色。
如此一來,我們就完成星級評鑑功能的顯示效果囉!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 這個星數等級再應用於其他頁面上了。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。