Mengapakah `querySelector` hanya memilih elemen pertama dalam kelas `.weekdays`?

querySelector Hanya Memilih Elemen Pertama

Dalam kod anda, anda menggunakan querySelector untuk mendapatkan semula elemen dalam kelas .weekdays. Walau bagaimanapun, kaedah ini hanya memilih elemen pertama yang sepadan dengan pemilih yang ditentukan. Memandangkan anda mempunyai berbilang tarikh dengan kelas yang sama, ia hanya menangkap tarikh "1" pertama.

Cara Membetulkannya: Gunakan querySelectorAll

Untuk memilih semua tarikh dalam kelas .weekdays, anda perlu menggunakan querySelectorAll. Kaedah ini mengembalikan NodeList yang mengandungi semua elemen yang sepadan dengan pemilih yang diberikan. Begini cara untuk membetulkan kod anda:

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

Penjelasan:

Kod ini:

1. Panggil querySelectorAll untuk memilih semua elemen dengan kelas .weekdays dan menyimpannya dalam NodeList.
2. Lelaran atas setiap elemen dalam NodeList menggunakan forEach.
3. Untuk setiap elemen, tambahkan pendengar acara klik yang memaparkan modal apabila diklik.

Dengan menggunakan querySelectorAll, anda memilih semua tarikh dalam kelas .weekdays dan melampirkan pendengar acara pada setiap daripada mereka, memastikan bahawa sebarang tarikh boleh mencetuskan modal paparan.

Atas ialah kandungan terperinci Mengapakah `querySelector` hanya memilih elemen pertama dalam kelas `.weekdays`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!