Ma fonction compte le nombre de cartes visibles à l'écran et si toutes sont affichées, elle affichera unearrow-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); }
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'ajouterarrow-up时，arrow-down被删除，反之亦然？我之前曾使用togglepour obtenir une simple icône d'ouverture/fermeture, mais cela ne fonctionne pas car elle peut s'agrandir plusieurs fois avant de fermer.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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') } }La cascade prend en compte de nombreux facteurs a>, 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éfiniessur les éléments HTML ne fait pas partie de ces facteurs.
和
Idem en ce qui concerne la cascade.
Supprimezclasses 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"); }