Menggunakan classList dalam fungsi Javascript untuk menambah kelas CSS, tetapi gaya bercanggah kerana kelas terbaharu tidak diutamakan-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

P粉738821035 2023-09-10 17:10:38

468

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

const showMoreIcon = document.querySelector('.cta-icon'); function myFunction(){ const btnIcon = cardsOnShow >= cards.length ? 'arrow-up' : 'arrow-down'; showMoreIcon.classList.add(btnIcon); }

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

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

P粉738821035

membalas semua (2)

P粉5790084122023-09-11 14:59:10 Tingkat 2

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') } }

Suka+0

Tambah Balasan

P粉3950561962023-09-11 12:38:15 Tingkat 1

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

Susunan kelas ditakrifkanpada elemen HTML bukanlah salah satu daripada faktor ini.

和
             
              Sama je kalau melata.
              
              Buangkelas 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"); }