Rumah > hujung hadapan web > tutorial css > Mengapakah getElementsByClassName() Hanya Mengubah Setiap Kelas Lain?

Mengapakah getElementsByClassName() Hanya Mengubah Setiap Kelas Lain?

Susan Sarandon
Lepaskan: 2024-11-27 18:57:12
asal
245 orang telah melayarinya

Why Does getElementsByClassName() Only Change Every Other Class?

Corak Perubahan Kelas yang Tidak Diingini: Setiap Kelas Lain Terjejas

Anda berhadapan dengan cabaran semasa menggunakan getElementsByClassName() dalam JavaScript. Apabila cuba menukar kelas setiap elemen, anda menghadapi isu di mana hanya setiap kelas lain diubah suai.

Punca Punca: Pengubahsuaian HTMLCollection

Punca asas isu ini terletak pada sifat HTMLCollection yang dikembalikan oleh getElementsByClassName(). Semasa anda menukar kelas elemen dalam koleksi, koleksi itu sendiri dikemas kini dan elemen itu tidak lagi disertakan. Ini bermakna semasa anda mengulangi koleksi, anda secara berkesan melangkau elemen ganti.

Penyelesaian: Lelaran Melalui Tatasusunan

Untuk menyelesaikan isu ini, anda boleh mengulang melalui susunan koleksi asal dan bukannya mengubah suai koleksi semasa anda meneruskan. Ini memastikan anda menggunakan perubahan kelas pada setiap elemen, tanpa mengira pengubahsuaian sebelumnya.

Kod Kemas Kini menggunakan For Loop:

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

for (var i = 0; i < blockSetLength; i++) {
    blockSet[0].className = "block-selected";
}
Salin selepas log masuk

Nota:

  • Daripada menukar kelas setiap elemen secara individu, anda boleh menggunakan gelung for untuk lelaran melalui elemen dan buat perubahan kelas.
  • Kod yang dikemas kini ini memperuntukkan kelas "yang dipilih blok" kepada elemen pertama tatasusunan blockSet untuk setiap lelaran.
  • Dengan menggunakan tatasusunan, anda elakkan isu koleksi diubah suai semasa lelaran.

Atas ialah kandungan terperinci Mengapakah getElementsByClassName() Hanya Mengubah Setiap Kelas Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan