Bagaimana untuk memilih berbilang kelas dengan nama yang sama dalam JS

Question

Saya menggunakan PHP untuk memaparkan senarai ini secara dinamik yang saya dapat daripada pangkalan data, setiap senarai mempunyai kelas yang sama dan kerana saya tidak boleh mengubahnya, ia dipaparkan secara dinamik. Saya memilih kelas ini melalui JavaScript dan mencipta acara pada klik untuk membuka dan menutupnya menggunakan kelas tersembunyi.

Sekarang saya menghadapi masalah, acara ini berfungsi untuk saya dan bertindak balas hanya kepada senarai pertama yang diberikan tetapi tidak kepada senarai lain. Adakah terdapat apa-apa cara untuk melakukan ini, saya cuba querySelectorAll dan getElementsByClassName dan beberapa pemilih lain tetapi tiada apa-apa yang berfungsi. Kod PHP:

<ul class="kartonul">
                        <?php
                         $user = get_user(); 
                         $user_id = $user['id'];
                             $query = "SELECT * FROM karton WHERE id_pacijent = $user_id";
                             $result = query($query);
                         
                             if($result->num_rows > 0) {
                                 
                                 while($row = $result->fetch_assoc()) {
                                     $karton = get_karton($user_id); 
                                     foreach($result as $karton) { 
                                      echo "<li class='likarton'>Karton " .$karton['id']." <i class='fa-solid fa-envelope'></i></li>
                                        <div  class='kartondiv hiddenRaspored'>
                                        <label class='kartonlabel'>Nalaz:</label> <br/>
                                        <p>" . $karton['nalaz'] . "</p>
                                        <label class='kartonlabel'>Dijagnoza:</label> <br/>
                                        <p>" . $karton['dijagnoza'] . "</p>
                                        <label class='kartonlabel'>Pregled:</label> <br/>
                                        <p>" . $karton['pregled'] . "</p>
                                        </div>";
                                     }
                                 }
                                }
                        ?>
                    </ul>

Kod JavaScript:

let karton = document.querySelector('.likarton');
let div = document.querySelector('.kartondiv');

karton.addEventListener('click', () => {
  if (div.classList.contains('hidden')) {
    div.classList.remove('hidden');
  } else {
    div.classList.add('hidden');
  }
});

Ini adalah templat: templat Masukkan penerangan imej di sini

Answer 1

Anda perlu menggunakan querySelectorAll()而不是querySelector().

Dengan cara ini anda akan menyasarkan semua elemen dan bukannya elemen padanan pertama. Anda kemudiannya harus mengulangi setiap acara dan menambah pendengar acara seperti ini:

let kartons  = document.querySelectorAll(".abc");

kartons.forEach(el => {
    el.addEventListener("click", (event) => {
         // Something happens on click

    })
});

Answer 2

Anda hanya memilih yang pertama .likarton 实例 - 这是通过使用 querySelectorAll() tetap

---

Memandangkan anda menggunakan addEventListener anda akan mendapat item tepat yang telah diklik sebagai parameter dalam panggilan balik.

JavaScript yang betul untuk menggunakan ciri ini ialah addEventListener('click', (event) => {})

Untuk merujuk elemen yang mencetuskan pengendali acara, anda boleh menggunakan event.currentTarget

Mulai dari itu anda boleh memilih div dan mengubah suai senarai kelas menggunakan .classList.*

---

Contoh

let karton = document.querySelectorAll('.likarton');

for (let i = 0; i < karton.length; i++) {
  karton[i].addEventListener("click", (event) => {
    let div = document.querySelector('.kartondiv');

    if (div.classList.contains('hidden')) {
      div.classList.remove('hidden');
    } else {
      div.classList.add('hidden');
    }
  });
}

---

Rujukan:

• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_value_of_this_within_the_handler
• https://developer.mozilla.org /en-US/docs/Web/API/Element/querySelectorAll#syntax