Rumah >hujung hadapan web >tutorial css >Mengapakah `querySelector` Hanya Memilih Elemen Pertama dan Bagaimana untuk Membetulkannya?

Mengapakah `querySelector` Hanya Memilih Elemen Pertama dan Bagaimana untuk Membetulkannya?

Susan Sarandon
Susan Sarandonasal
2024-11-06 00:06:02330semak imbas

Why Does `querySelector` Only Select the First Element and How to Fix It?

Mengapa querySelector Hanya Memilih Elemen Pertama dan Cara Membetulkannya

Apabila menggunakan querySelector, penting untuk diingat bahawa ia hanya memilih yang pertama elemen padanan dalam dokumen. Jika anda mempunyai berbilang elemen dengan kelas atau ID yang sama, hanya yang pertama akan dikembalikan.

Dalam kes anda, anda mempunyai berbilang butang dengan hari minggu kelas yang sama mewakili tarikh pada kalendar . Apabila anda mengklik salah satu daripadanya, ia tidak berfungsi kerana querySelector hanya memilih yang pertama sahaja.

Penyelesaian sebaliknya menggunakan querySelectorAll, yang mengembalikan senarai nod semua unsur yang sepadan. Anda kemudian boleh mengulangi senarai dan melampirkan pendengar acara pada setiap satu.

Berikut ialah kod yang diperbetulkan:

document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click", () => {
    document.querySelector(".bg-modal").style.display = "flex";
}));

Ini akan melampirkan pendengar acara pada setiap elemen dengan hari minggu kelas, memastikan bahawa mana-mana tarikh boleh membuka borang apabila diklik.

Atas ialah kandungan terperinci Mengapakah `querySelector` Hanya Memilih Elemen Pertama dan Bagaimana untuk Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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