Obtuve algunos datos y todos tienen los mismos botones para abrir el modal, pero cada modal debe tener contenido sobre ese elemento específico en el que se ha hecho clic.
El botón se muestra en todos los elementos de la fila, pero cuando hago clic en él, se abre modal solo en el primer elemento de la fila.
Tengo un botón simple en HTML.
// this is part of fetched items in a row, each item has this button <div> <button id="openUniqueModal"> BUTTON </button> </div>Y función abierta en JS
let openUniqueModalBtn = document.getElementById('openUniqueModal'); if (openUniqueModalBtn != null) { document.getElementById( 'openUniqueModal' ).onclick = function () { modal.style.display = 'block'; }; ..... .....¿Cómo puedo lograr que cada elemento de botón en la fila se active al hacer clic? ¿Tengo que recorrerlo en código JS?
EDITAR:
otro enfoque
<button class="openUniqueModal">BUTTON</button> document .querySelectorAll('.openUniqueModal') .addEventListener('click', (event) => { myModal.style.display = 'block'; });No necesita adjuntar un detector de eventos a cada botón, sino que puede usar agregar una clase común para agregar botones y luego agregar un detector solo una vez
document.querySelector('.btn').addEventListener('click', (event) => { // you can check button id and take different actions if needed // event.target.id });puede usar la respuesta de Zohaib Ijaz e incluso puede agregar un comodín si lo desea a la frase '.btn'.
Por favor, no use identificaciones duplicadas en los elementos. como botón 'openUniqueModal' se duplicará en su dom para cada fila ya que no habrá incremento en la identificación.
Tener elementos con la misma identificación causará muchos problemas cuando se trata de industrial.
si está usando jquery, use la siguiente función,
$( "#openUniqueModal" ).on( "click", function() { // your desired functionality here // use $( this ) to access current element });* Habría agregado esto como un comentario en la respuesta de Zohaib Ijaz, pero no tengo suficiente permiso.