Mengapakah `querySelector` Hanya Memilih Elemen Pertama dan Bagaimana Saya Boleh Membetulkannya?

Mengapa querySelector Hanya Memilih Elemen Pertama dan Bagaimana Saya Boleh Membetulkannya?

Memahami querySelector

Dalam JavaScript, kaedah querySelector memilih yang pertama elemen padanan dalam dokumen berdasarkan rentetan pemilih yang disediakan. Jika berbilang elemen sepadan dengan pemilih, hanya yang pertama dikembalikan.

Perihalan Isu

Dalam CodePen yang anda sediakan, anda menggunakan querySelector untuk memilih elemen dengan kelas hari bekerja. Walau bagaimanapun, anda perhatikan bahawa hanya elemen padanan pertama yang mencetuskan acara klik, manakala semua yang lain tidak.

Penyelesaian: Menggunakan querySelectorAll untuk Pelbagai Elemen

Untuk menangani isu ini, anda harus menggunakan querySelectorAll kaedah sebaliknya, yang mengembalikan NodeList yang mengandungi semua elemen padanan. Kemudian, anda boleh mengulangi NodeList dan melampirkan pengendali acara pada setiap elemen.

Kod Disemak:

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

Penjelasan:

• document.querySelectorAll( ".weekdays"): Memilih semua elemen dengan kelas hari kerja dan mengembalikannya sebagai a NodeList.
• forEach: Mengulang setiap elemen dalam NodeList.
• elem.addEventListener("klik", ...): Melampirkan pendengar acara klik pada setiap elemen hari minggu, yang mencetuskan kod yang sama seperti sebelum ini untuk memaparkan modal borang.

Sekarang, apabila anda mengklik pada mana-mana elemen hari bekerja, modal akan muncul dengan betul, membetulkan isu yang anda alami dengan querySelector hanya memilih elemen pertama.

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