Здравствуйте, у меня возник достаточно
сложный вопрос, с которым давно не могу справиться. Дело в том, что у меня на сайте много карточек с услугами. Все карточки я перенес в JavaScript обьект для оптимизации сайта, сделал вывод этих карточек на сайт.
Под каждой карточкой есть кнопка 'читать больше' при нажатии на нее должно всплывать окно примерно такой структуры:
<div class="popup__bg2">
<div class="popup2">
<button id="close-popup2"><img src="/images/close.png" alt=""></button>
<!-- Разметка слайдера (html код) -->
<img style="border-radius: 25px;" src="https://sun9-west.userapi.com/sun9-69/s/v1/ig2/42_Y-LZ88MrqxfyEM8EC3Gi09V_etYlG8v0gxE7lXWMTIbpuW6MmP6Sum9yVnV__BucwUDkLDqoQjW5Wo0O89gSt.jpg?size=807x538&quality=96&type=none" alt="">
<h2 class=" u-text u-text-default u-text-1">Аренда бани</h2>
<p class="u-text u-text-2">Цена 1 000–1 200 ₽ / час</p>
<p class="u-text u-text-2">от 6 до 12 чел : дровяная парилка ,бассейн с подогревом, комната отдыха , оборудованная мини кухня, зал со столом , мангал.</p>
<button id="close" class="u-active-none u-border-2 u-border-hover-palette-2-base u-border-no-left u-border-no-right u-border-no-top u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-2"><a href="https://vk.com/im?media=&sel=-32989505">Записаться</a></button>
</div>
</div>
Скрипт для открытия окна :
let popupBg2 = document.querySelector('.popup__bg2'); // Фон попап окна
let popup2 = document.querySelector('.popup2'); // Само окно
let openPopupButtons2 = document.querySelectorAll('#popupOpen2'); // Кнопки для показа окна
let closePopupButton2 = document.querySelector('#close-popup2'); // Кнопка для скрытия окна
openPopupButtons2.forEach((button) => { // Перебираем все кнопки
button.addEventListener('click', (e) => { // Для каждой вешаем обработчик событий на клик
e.preventDefault(); // Предотвращаем дефолтное поведение браузера
popupBg2.classList.add('active'); // Добавляем класс 'active' для фона
popup2.classList.add('active'); // И для самого окна
})
});
closePopupButton2.addEventListener('click',() => { // Вешаем обработчик на крестик
popupBg2.classList.remove('active'); // Убираем активный класс с фона
popup2.classList.remove('active'); // И с окна
});
document.addEventListener('click', (e) => { // Вешаем обработчик на весь документ
if(e.target === popupBg2) { // Если цель клика - фот, то:
popupBg2.classList.remove('active'); // Убираем активный класс с фона
popup2.classList.remove('active'); // И с окна
}
});
Все классы окон хранятся в обьекте :
{
title: 'Арендовать домик',
price: '14 000 - 18 000 руб',
desc: 'desc',
image: 'images/Domiki.png',
popup_open: 'popupOpen1', // кнопка открытия окна
popup: 'popup', // класс окна
popup_bg: 'popup__bg', // класс окна
id: '1'
},
Мне нужно как то перебрать обьект и для каждой кнопки по нажатию сделать свое окно. Помогите пожалуйста с решением. Если нужно то вот способ, как я вывел карточки на сайт :
Когда я попытался таким же путем вывести окна из обьекта, то они все сразу вывелись при нажатии на кнопку...
Я думаю вы понимаете о чем я.
items.forEach(item => {
data += ` <div class="u-container-style u-hover-feature u-list-item u-repeater-item u-list-item-${item.id}" data-animation-name="" data-animation-duration="0" data-animation-direction="">`
data += ` <div class="u-container-layout u-similar-container u-valign-top-xs u-container-layout-${item.id}">`
data += ` <img alt="" class="u-expanded-width u-image u-image-default u-image-${item.id}" data-image-width="368" data-image-height="374" src="${item.image}" data-animation-name="customAnimationIn" data-animation-duration="1000" data-animation-delay="0" data-animation-direction="">`
data += ` <h3 class="u-text u-text-default u-text-1">${item.title}</h3>`
data += ` <p class="u-text u-text-2">${item.price}</p>`
data += ` <a href="" id="${item.popup_open}" class="u-active-none u-border-2 u-border-hover-palette-2-base u-border-no-left u-border-no-right u-border-no-top u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-1">Читать больше</a>`
data += ` </div>`
data += ` </div>`
})
list.innerHTML = data
