在 Javascript 函數中使用 classList 新增 CSS 類，但樣式發生衝突，因為最新的類別不優先

Question

我的函數計算螢幕上可見的卡片數量，如果全部顯示，則將arrow-up 類別新增到我的圖示中，如果某些卡片仍然對使用者隱藏，則 arrow添加-down圖示。

const showMoreIcon = document.querySelector('.cta-icon');

function myFunction(){
   const btnIcon = cardsOnShow >= cards.length ? 'arrow-up' : 'arrow-down';
   showMoreIcon.classList.add(btnIcon);
}

<span class="medium-icon"></span>

這有效，但是我可以在DOM 中看到正確的類別被添加到span 中，因為我期望它，因為添加了arrow-down 類別首先（在在顯示所有可見卡片之前，使用者必須多次展開內容） - 然後，儘管添加了arrow-up 類，但它不會覆蓋arrow-down。 p>

如何確保新增 arrow-up 時，arrow-down 被刪除，反之亦然？我之前曾使用 toggle 來實現簡單的開啟/關閉圖標，但這不起作用，因為它在關閉之前可能會展開多次。

Answer 1

我建議刪除您不再需要的課程：

function myFunction(){
   if (cardsOnShow >= cards.length) {
      showMoreIcon.classList.add('arrow-up')
      showMoreIcon.classList.remove('arrow-down')
   } else {
      showMoreIcon.classList.remove('arrow-up')
      showMoreIcon.classList.add('arrow-down')
   }
}

Answer 2

級聯考慮了許多因素，這是一組規則，用於確定當兩個衝突的規則應用於同一元素時哪個規則「獲勝」。

在 HTML 元素上定義類別的順序不是這些因素之一。

和

就級聯而言是相同的。

---

刪除不應套用的類別。

if (cardsOnShow >= cards.length) {
    showMoreIcon.classList.add("arrow-up");
    showMoreIcon.classList.remove("arrow-down");
} else {
    showMoreIcon.classList.add("arrow-down");
    showMoreIcon.classList.remove("arrow-up");
}

或以只關心單一類別來改變方向的方式來寫 CSS：

.arrow {
    /* arrow up CSS */
}
.arrow.invert {
    /* override the up rule and replace with the down rule
}

然後

if (cardsOnShow >= cards.length) {
    showMoreIcon.classList.remove("invert");
} else {
    showMoreIcon.classList.add("invert");
}