Todavía estoy aprendiendo js, me gustaría encontrar una manera de reducir todo el código que pongo a continuación, quiero abrir diferentes modales y cerrarlos en html.
En la sección Abrir modal, como puede ver, hice una función por modal donde el "botón varEdit" es la ID que asigné a cada botón para abrirlos y la ID "var-modal" es la que asigné a cada modal diferente envase.
En la sección Cerrar modal, "close-varModal" es la ID que asigné a cada contenedor cerrado y "var-modal" nuevamente es la ID para cada contenedor modal.
Me gustaría reducir el código con un bucle for o tal vez otra propiedad de js.
Por ejemplo, traté de cerrar todos los modales simplemente asignando la misma clase .close a todos los contenedores cerrados, pero solo el primer modal que abrí pudo cerrarse y si alguien sabe por qué sucede eso con este idioma, ¡se lo agradecería!
//OPEN MODALS document.getElementById('imageEdit-button').addEventListener('click', function (){ document.querySelector('#pic-modal').style.display = 'flex'; }); document.getElementById('curpEdit-button').addEventListener('click', function (){ document.querySelector('#curp-modal').style.display = 'flex'; }); document.getElementById('phoneEdit-button').addEventListener('click', function (){ document.querySelector('#phone-modal').style.display = 'flex'; }); document.getElementById('addressEdit-button').addEventListener('click', function (){ document.querySelector('#address-modal').style.display = 'flex'; }); // CLOSE MODALS document.querySelector('#close-picModal').addEventListener('click', function (){ document.querySelector('#pic-modal').style.display = 'none'; }); document.querySelector('#close-curpModal').addEventListener('click', function (){ document.querySelector('#curp-modal').style.display = 'none'; }); document.querySelector('#close-phoneModal').addEventListener('click', function (){ document.querySelector('#phone-modal').style.display = 'none'; }) document.querySelector('#close-addressModal').addEventListener('click', function (){ document.querySelector('#address-modal').style.display = 'none'; })Una opción es dar a los botones de abrir y cerrar un atributo, tal vez en el conjunto de datos, que especifique el ID o la clase (única) del elemento para abrir/cerrar. Por ejemplo:
for (const button of document.querySelectorAll('button[data-target]')) { button.addEventListener('click', () => { const target = document.querySelector('#' + button.dataset.target); target.classList[button.matches('.close') ? 'add' : 'remove']('closed'); }); } .closed { display: none; } <button data-target="imageEdit">open image edit</button> <div id="imageEdit" class="closed"> <h3>image edit</h3> <button class="close" data-target="imageEdit">close</button> </div> Para secciones adicionales, simplemente agregue más HTML, ajustando los data-target según sea necesario.
También puede modificar la lógica para que un clic en cualquiera de los botones cambie el estado actual del objetivo, si lo desea, simplificando la línea dentro del detector de clics para
target.classList.toggle('closed');