Verwenden der Funktion „classList“ in der Javascript-Funktion zum Hinzufügen von CSS-Klassen, aber Stilkonflikte, da die neueste Klasse keinen Vorrang hat

Question

Meine Funktion zählt die Anzahl der auf dem Bildschirm sichtbaren Karten und wenn alle angezeigt werden, wird das arrow-up 类添加到我的图标中，如果某些卡片仍然对用户隐藏，则 arrow添加-downSymbol angezeigt.

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>

Das funktioniert, aber ich kann im DOM sehen, dass die richtige Klasse zu span 中，因为我期望它，因为添加了 arrow-down 类首先（在显示所有可见卡片之前，用户必须多次展开内容） - 然后，尽管添加了 arrow-up 类，但它不会覆盖 arrow-down。 p> hinzugefügt wird

Wie wäre es, wenn Sie unbedingt arrow-up 时，arrow-down 被删除，反之亦然？我之前曾使用 toggle hinzufügen, um ein einfaches Öffnen/Schließen-Symbol zu erhalten, aber das funktioniert nicht, da es vor dem Schließen möglicherweise mehrmals erweitert wird.

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