recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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

P粉005134685P粉005134685241 Il y a quelques jours366

répondre à tous(2)je répondrai

  • P粉652523980

    P粉6525239802024-03-27 14:50:25

    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

    })
});

    répondre
    0
  • P粉674999420

    P粉6749994202024-03-27 14:10:01

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

    Référence :

    répondre
    0
  • Annulerrépondre