Utilisation de classList dans la fonction Javascript pour ajouter des classes CSS, mais les styles sont en conflit car la dernière classe n'a pas la priorité

Question

Ma fonction compte le nombre de cartes visibles à l'écran et si toutes sont affichées, elle affichera une arrow-up 类添加到我的图标中，如果某些卡片仍然对用户隐藏，则 arrow添加-downicône.

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>

Cela fonctionne, mais je peux voir dans le DOM que la bonne classe est ajoutée à span 中，因为我期望它，因为添加了 arrow-down 类首先（在显示所有可见卡片之前，用户必须多次展开内容） - 然后，尽管添加了 arrow-up 类，但它不会覆盖 arrow-down。 p>

Que diriez-vous de vous assurer d'ajouter arrow-up 时，arrow-down 被删除，反之亦然？我之前曾使用 toggle pour obtenir une simple icône d'ouverture/fermeture, mais cela ne fonctionne pas car elle peut s'agrandir plusieurs fois avant de fermer.

Answer 1

Je recommande de supprimer les cours dont vous n'avez plus besoin :

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

La cascade prend en compte de nombreux facteurs , qui est un ensemble de règles utilisées pour déterminer quelle règle « gagne » lorsque deux règles contradictoires sont appliquées au même élément.

L'ordre dans lequel les classes sont définies sur les éléments HTML ne fait pas partie de ces facteurs.

和

Idem en ce qui concerne la cascade.

---

Supprimez classes qui ne doivent pas être appliquées.

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

Ou écrivez le CSS d'une manière qui ne se soucie que d'une seule classe pour changer l'orientation :

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

Alors

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