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
2
0
0
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
})
});
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?:
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
