Menggunakan classList dalam fungsi Javascript untuk menambah kelas CSS, tetapi gaya bercanggah kerana kelas terbaharu tidak diutamakan

Question

Fungsi saya mengira bilangan kad yang kelihatan pada skrin dan jika semuanya dipaparkan, ia akan arrow-up 类添加到我的图标中，如果某些卡片仍然对用户隐藏，则 arrow添加-downikon.

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>

Ini berfungsi, tetapi saya dapat melihat dalam DOM bahawa kelas yang betul ditambahkan pada span 中，因为我期望它，因为添加了 arrow-down 类首先（在显示所有可见卡片之前，用户必须多次展开内容） - 然后，尽管添加了 arrow-up 类，但它不会覆盖 arrow-down。 p>

Bagaimana pula dengan memastikan untuk menambah arrow-up 时，arrow-down 被删除，反之亦然？我之前曾使用 toggle untuk mencapai ikon buka/tutup yang mudah, tetapi ini tidak berfungsi kerana ia mungkin berkembang beberapa kali sebelum ditutup.

Answer 1

Saya syorkan padamkan kursus yang anda tidak perlukan lagi:

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

Cascading mengambil kira banyak faktor , iaitu satu set peraturan yang digunakan untuk menentukan peraturan yang "menang" apabila dua peraturan yang bercanggah digunakan pada elemen yang sama.

Susunan kelas ditakrifkan pada elemen HTML bukanlah salah satu daripada faktor ini.

和

Sama je kalau melata.

---

Buang kelas yang tidak sepatutnya digunakan.

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

Atau tulis CSS dengan cara yang hanya mengambil berat tentang satu kelas untuk menukar orientasi:

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

Kemudian

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