我的函數計算螢幕上可見的卡片數量，如果全部顯示，則將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 來實現簡單的開啟/關閉圖標，但這不起作用，因為它在關閉之前可能會展開多次。
我建議刪除您不再需要的課程：
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') } }級聯考慮了許多因素 a>，這是一組規則，用於確定當兩個衝突的規則應用於同一元素時哪個規則「獲勝」。
在 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"); }