Uso PHP para renderizar dinámicamente estas listas que obtuve de la base de datos, y cada una tiene la misma clase, porque no puedo cambiarla, se renderiza dinámicamente. Selecciono estas clases a través de JavaScript y creo un evento al hacer clic para abrirlas y cerrarlas con la clase oculta.
Ahora tengo un problema, este evento me funciona y reacciona solo para la primera lista renderizada, pero no para las demás. ¿Hay alguna forma de hacer esto? Intenté querySelectorAll y getElementsByClassName y algunos otros selectores, pero nada funcionó. Código 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>Código 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'); } });Esta es una plantilla: Plantilla ingrese la descripción de la imagen aquí
Solo está seleccionando la primera instancia de .likarton ; esto se soluciona usando querySelectorAll()
Dado que está utilizando addEventListener , obtiene el elemento exacto en el que se hace clic como argumento en la devolución de llamada.
El javascript correcto para usar esta característica es addEventListener('click', (event) => {})
Y para hacer referencia al elemento en el que se activó el controlador de eventos, puede usar event.currentTarget
Desde ese punto, puede seleccionar el div y usar .classList.* para modificar la lista de clases
ejemplo
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'); } }); }referencias:
Debe usar querySelectorAll() en lugar de querySelector() .
De esta manera, apuntará a todos los elementos en lugar del primero que coincida. Luego debe recorrer cada uno y agregar un detector de eventos como este:
let kartons = document.querySelectorAll(".abc"); kartons.forEach(el => { el.addEventListener("click", (event) => { // Something happens on click }) });