JavaScript es algo que estoy aprendiendo poco a poco, así que disculpe mi ignorancia...!
Tengo una lista de imágenes en una galería y estoy creando un modal en un evento de clic. Logré recopilar todas las fuentes de las imágenes en una matriz y luego usé el método forEach para agregar una etiqueta li e img en una ul principal, con todas las fuentes en el atributo src.
Mi problema es que también tengo una serie de atributos alternativos que también necesito configurar en la misma lista de imágenes.
No creo que pueda hacer ambos atributos en un bucle forEach, y parece demasiado complicado hacer un segundo bucle para los atributos alt. Debe haber una manera más simple, está más allá de mi comprensión actual.
Aquí está el código que ya tengo a continuación, me preguntaba si tal vez debería mirar un objeto JSON en lugar de este enfoque.
$('.gallery-image img').click(function(){ $('.modal').addClass('show'); var images = document.getElementsByClassName('aurora-gallery-image'); var imageSources = []; var imageTitles = []; for (var i = 0; i < images.length; i++) { imageSources.push(images[i].src); imageTitles.push(images[i].alt); } imageSources.forEach(imageFunction); function imageFunction(item){ $('.image-modal ul').append('<li class="image-modal-item"><img class="modal-content" alt="" src="' + item + '" /><p id="aurora-gallery-image-title"> </p></li>'); } });forEach() pasa el índice de la matriz como segundo argumento a la función de devolución de llamada. Puede usarlo para obtener el elemento correspondiente de la matriz imageTitles
function imageFunction(item, index){ $('.image-modal ul').append(`<li class="image-modal-item"><img class="modal-content" alt="${imageTitles[i]}" src="${item}" /><p id="aurora-gallery-image-title"> </p></li>`); } Pero realmente no necesitas las matrices en absoluto. Solo hazlo en el bucle for :
for (let i = 0; i < images.length; i++) { $('.image-modal ul').append(`<li class="image-modal-item"><img class="modal-content" alt="${images[i].alt}" src="${images[i].src}" /><p id="aurora-gallery-image-title"> </p></li>`); }