So wählen Sie in JS mehrere Klassen mit demselben Namen aus

Question

Ich verwende PHP, um diese Listen, die ich aus der Datenbank erhalte, dynamisch zu rendern. Jede Liste hat dieselbe Klasse und da ich sie nicht ändern kann, wird sie dynamisch gerendert. Ich wähle diese Klassen über JavaScript aus und erstelle per Klick ein Ereignis, um sie mithilfe der ausgeblendeten Klasse zu öffnen und zu schließen.

Jetzt habe ich ein Problem, dieses Ereignis funktioniert bei mir und reagiert nur auf die erste gerenderte Liste, aber nicht auf andere Listen. Gibt es eine Möglichkeit, dies zu tun? Ich habe querySelectorAll und getElementsByClassName und einige andere Selektoren ausprobiert, aber nichts funktioniert. PHP-Code:

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

JavaScript-Code:

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');
  }
});

Dies ist eine Vorlage: Vorlage Geben Sie hier eine Bildbeschreibung ein

Answer 1

您需要使用querySelectorAll()而不是querySelector()。

这样您将定位所有元素，而不是第一个匹配的元素。 然后，您应该循环遍历每个事件并添加一个事件侦听器，如下所示：

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

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

    })
});

Answer 2

您仅选择第一个 .likarton 实例 - 这是通过使用 querySelectorAll() 修复的

---

由于您使用的是 addEventListener，因此您将获得被单击的确切项目作为回调中的参数。

使用此功能的正确 JavaScript 是 addEventListener('click', (event) => {})

要引用触发事件处理程序的元素，您可以使用 event.currentTarget

从那时起，您可以选择 div 并使用 .classList.* 修改类列表

---

示例

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');
    }
  });
}

---

参考文献：

• 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