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

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!