我的函數計算屏幕上可見的卡片，如果所有的都顯示了，那么向上箭頭類被添加到我的圖標，如果一些仍然對用戶隱藏，向下箭頭圖標被添加。

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中，但是，因為向下箭頭類是首先添加的(在所有可見的卡片顯示之前，用戶必須多次擴展內容)——然后盡管向上箭頭類被添加，它并沒有覆蓋向下箭頭。

我如何確保當向上箭頭被添加時，向下箭頭被刪除，反之亦然？我以前對簡單的打開/關閉圖標使用過toggle，但這不起作用，因為它在關閉前可以展開多次。

級聯考慮了許多因素，級聯是用于確定哪個規則& quotwins & quot當兩個沖突的規則應用于同一元素時。

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

& ltdiv class = & quotfoo bar & quot& gt并且& ltdiv class = & quotbar foo & quot& gt就級聯而言是相同的。

刪除不適用的類別。

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");
}

我建議刪除您不再需要的類:

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')
   }
}