實作打星功能

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 這個星數等級再應用於其他頁面上了。

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