Comment sélectionner plusieurs classes avec le même nom dans JS

Question

J'utilise PHP pour restituer dynamiquement ces listes que je reçois de la base de données, chaque liste a la même classe et comme je ne peux pas la modifier, elle s'affiche dynamiquement. Je sélectionne ces classes via JavaScript et crée un événement en un clic pour les ouvrir et les fermer à l'aide de la classe cachée.

Maintenant, j'ai un problème, cet événement fonctionne pour moi et réagit uniquement à la première liste rendue mais pas aux autres listes. Existe-t-il un moyen de faire cela, j'ai essayé querySelectorAll et getElementsByClassName et quelques autres sélecteurs mais rien ne fonctionne. Code 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>

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

Ceci est un modèle : modèle Entrez la description de l'image ici

Answer 1

Vous devez utiliser querySelectorAll()而不是querySelector().

De cette façon, vous ciblerez tous les éléments au lieu du premier élément correspondant. Vous devez ensuite parcourir chaque événement et ajouter un écouteur d'événement comme celui-ci :

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

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

    })
});

Answer 2

Vous sélectionnez uniquement le premier .likarton 实例 - 这是通过使用 querySelectorAll() corrigé

---

Puisque vous utilisez addEventListener, vous obtiendrez l'élément exact sur lequel vous avez cliqué comme paramètre dans le rappel.

Le JavaScript correct pour utiliser cette fonctionnalité est addEventListener('click', (event) => {})

Pour référencer l'élément qui a déclenché le gestionnaire d'événements, vous pouvez utiliser event.currentTarget

Dès lors, vous pouvez sélectionner le div et modifier la liste des classes en utilisant .classList.*

---

Exemple

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

for (let i = 0; i  {
    let div = document.querySelector('.kartondiv');

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

---

Référence :

• 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