Maison > Questions et réponses > le corps du texte
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粉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 }) });
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 :