Bagaimanakah saya boleh mengemas kini satu-satunya item "aktif" dalam senarai?

Question

Andaikan anda mempunyai 4 elemen, hanya satu daripadanya boleh mempunyai nama kelasactive. Elemen aktif dikemas kini beberapa kali sesaat (di sini ialah contoh tiruan).

Cara mudah ialah:

• Alih keluar dari setiap elemenactive
• Menetapkan active kepada elemen yang dipilih sekarang

Masalahnya ialah jika elemen yang dipilih tidak berubah , kami sedang mengalih keluar nama kelas dan menetapkan semula nya (berkemungkinan menyebabkan gangguan paparan), yang tidak masuk akal.

Sudah tentu, kita boleh menambah peraturan lain untuk tidak mengalih keluar jika ia masih merupakan elemen yang dipilih, tetapi kod itu akan menjadi kurang boleh dibaca.

Soalan: Adakah mod standard yang boleh menyelesaikan masalah ini?

var i = 0;

setInterval(() => {
    i += 1;
    document.querySelectorAll('.active').forEach(item => item.classList.remove('active'));
    document.querySelector('#item' + Math.floor(i /4)).classList.add('active');
}, 500);

.active { color: red; }

<div id="item0" class="active">item 0</div>
<div id="item1">item 1</div>
<div id="item2">item 2</div>
<div id="item3">item 3</div>

Answer 1

Ringkasan

Jadi, nampaknya anda sedang mencari cara yang lebih elegan untuk menambah dan mengalih keluar kelas aktif untuk satu set elemen. Daripada mengalih keluar kelas aktif daripada semua elemen dan kemudian menambahkannya semula pada elemen yang sedang aktif (active类，然后将其添加回当前活动元素（这可能会导致潜在的问题/视觉故障）。而且似乎你正在尝试避免添加太多的代码来检查是否需要删除/添加activeini boleh menyebabkan masalah berpotensi/gangguan visual). Dan nampaknya anda cuba mengelak daripada menambah terlalu banyak kod untuk menyemak sama ada kelas aktif perlu dialih keluar/tambah (jika elemen aktif tidak berubah

).

Potensi penyelesaian

Secara peribadi, saya tidak fikir ini adalah pendekatan terbaik (menggunakan operator ternary untuk pelaksanaan kod boleh menjadi kucar-kacir

), tetapi saya fikir kod itu cukup ringkas dan agak boleh dibaca secara keseluruhan.

active类。 add()函数只会在元素当前没有该类时添加类，而remove()函数则相反（仅在类存在时删除类）。这意味着你可以在活动元素上调用add()Pada asasnya, anda boleh menggabungkan kod untuk menambah atau mengalih keluar

fungsi tanpa perlu risau tentang sebarang gangguan visual jika elemen aktif tidak berubah.

Menggunakan logik ini, kita hanya perlu mengulangi semua mungkin elemen, dan kemudian menggunakan pengendali ternaryadd()（如果活动元素没有更改，这不会有影响），否则调用remove(), kita boleh menyemak sama ada elemen ialah elemen yang sedang aktif. Jika ya, panggil add() (

Ini tiada kesan jika elemen aktif tidak berubah

), jika tidak panggil remove().

let i = 0,
    interval;

interval = setInterval(() => {
  i += 1;
  document.querySelectorAll("[id^=item]").forEach(el => (el.id == `item${Math.floor(i / 4)}`) ? el.classList.add("active") : el.classList.remove("active"));
  if(i >= 24) clearInterval(interval);
}, 500);

.active { color: red; }

<div id="item0" class="active">item 0</div>
<div id="item1">item 1</div>
<div id="item2">item 2</div>
<div id="item3">item 3</div>
<div id="item4">item 4</div>
<div id="item5">item 5</div>
<div id="item6">item 6</div>

Nota Ini mengandaikan anda boleh mengulangi semua item开头的idkemungkinan

elemen aktif. Dalam kes ini, mereka berdua mempunyai 🎜. Tanpa pengecam yang boleh digunakan untuk menggelungkan semua elemen aktif yang mungkin, lebih banyak kod perlu ditambah. 🎜