Оптимизировать код
Привет мир!
Имеется конструкция скрывающая модальные окна и их оверлей. Вот такая: let scolor = document.querySelector('#scolor'); scolor.onclick = function () { document.querySelectorAll('#KIDE_opciones, .overlayo').forEach(elem => elem.style.display = "none"); }; let most = document.querySelector('.overlayo'); most.onclick = function () { document.querySelectorAll('.KIDE_mostrar, .overlayo').forEach(elem => elem.style.display = "none"); }; let kidemens = document.querySelector('#kide_x_s'); kidemens.onclick = function () { document.querySelector(".overlayo").style.display = "none"; }; let kborrar = document.querySelector('#KIDE_mensaje_borrar'); kborrar.onclick = function () { document.querySelector(".overlayo").style.display = "none"; }; Все работает, но перфекционизм негодует, 4 переменные для одной и той же функции наверное дико, попытался записать в одну добавив цикл: let scolor = document.querySelectorall('#scolor, .overlayo, #kide_x_s, #KIDE_mensaje_borrar').forEach(el) =>; scolor.onclick = function () { document.querySelectorAll('#KIDE_opciones, .overlayo, .KIDE_mostrar, ').forEach(elem => elem.style.display = "none"); }; Явно блуждаю в синтаксисе, но уже по всякому перепробовал. Можно ли заставить это работать? |
Ubivectel,
если окна однотипные, должно быть примерно так. let modal = document.querySelectorAll('.modal'); let btn = document.querySelectorAll('.btn'); btn.forEach((el, i) => el.addEventListener('click', () => modal[i].style.display = "none")); |
Привет рони :victory:
Нет, не прокатывает, там в том и заморочка, что кругом разные селекторы '.modal' и '.btn' не присутствуют на нужных элементах. А дописывать им классы чревато тем, что они "подхватят/" лишние стили |
Ubivectel,
впишите ваши селекторы в предложенный код или сделайте минимальный макет |
Однако весь моск поломал, но этот код работает:
let scolor = document.querySelector('#scolor'); scolor.onclick = function() { document.querySelectorAll('#KIDE_opciones, .overlayo').forEach(elem => elem.style.display = "none"); }; let most = document.querySelector('.overlayo'); most.onclick = function() { document.querySelectorAll('.KIDE_mostrar, .overlayo').forEach(elem => elem.style.display = "none"); }; let kidemens = document.querySelector('#kide_x_s'); kidemens.onclick = function() { document.querySelector(".overlayo").style.display = "none"; }; let kborrar = document.querySelector('#KIDE_mensaje_borrar'); kborrar.onclick = function() { document.querySelector(".overlayo").style.display = "none"; }; А этот нет: let scolor = document.querySelectorall('#scolor, .overlayo, #kide_x_s, #KIDE_mensaje_borrar').forEach(el) =>; scolor.onclick = function () { document.querySelectorAll('#KIDE_opciones, .overlayo, .KIDE_mostrar,').forEach(elem => elem.style.display = "none"); }; Вроде ведь одно и то же, что не так делаю :( |
И так не работает
let modals = document.querySelectorAll('#scolor, .overlayo, #kide_x_s, #KIDE_mensaje_borrar'); let btns = document.querySelectorAll('#KIDE_opciones, .overlayo, .KIDE_mostrar,'); btns.forEach((el, i) => el.addEventListener('click', () => modals[i].style.display = "none")); |
Цитата:
Цитата:
|
Да я не дорос до таких слов )
|
Ubivectel,
[html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Так наверно должно быть
document.querySelectorall('#scolor, .overlayo, #kide_x_s, #KIDE_mensaje_borrar') .forEach( el => { el.onclick = () => el.style.display = "none" } ) |
Часовой пояс GMT +3, время: 04:28. |