Как вывести карточки через js на сайт?

Question

[chtopisatsuda]

Здравствуйте, я делаю вывод карточек с грубо говоря товарами на сайте, вместе с всплывающими окнами для них, но я не знаю как их вывести п обьекту...

const items = [
    {
        icon: './images/Domiki.png',
        title: 'Арендовать домик',
        price: '14 000 - 18 000 руб',
        imgSlide: "https://sun9-east.userapi.com/sun9-24/s/v1/ig2/753S7TLycM6DMQfZVH7FX3DnaRWGFfPtX1iHEvJZmGe-aOWri_BQYum06qhLh9NS5jSyUl87dsGus73PA36y0qmG.jpg?size=807x538&quality=96&type=none",
        imgSlide2: "https://sun9-west.userapi.com/sun9-40/s/v1/ig2/uMjAVhwhEHHBV7rUv45n-1jemSc8NYDcFg0YTbpL__8AONB0GviZZ1asOI_IHGfNOJje_MQZYxSfoD6y1KJAlhir.jpg?size=807x538&quality=96&type=none",
        imgSlide3: "https://sun9-west.userapi.com/sun9-5/s/v1/ig2/VLnhS9G2_c8oLT0ZJIWcUx_yHDT97BZc-RhlOqj9uczWdg3l6gFYvMN7EQMLIiFPBrz-C2M7hjXXxpiDu49AC4ml.jpg?size=807x538&quality=96&type=none",
        desc: 'desc',
        popup_bg: 'popup__bg',
        popup: 'popup',
        popup_open: 'popupOpen1'
    },
    {
        icon: './images/Domiki.png',
        title: 'Арендовать домик',
        price: '14 000 - 18 000 руб',
        imgSlide: "https://sun9-east.userapi.com/sun9-24/s/v1/ig2/753S7TLycM6DMQfZVH7FX3DnaRWGFfPtX1iHEvJZmGe-aOWri_BQYum06qhLh9NS5jSyUl87dsGus73PA36y0qmG.jpg?size=807x538&quality=96&type=none",
        imgSlide2: "https://sun9-west.userapi.com/sun9-40/s/v1/ig2/uMjAVhwhEHHBV7rUv45n-1jemSc8NYDcFg0YTbpL__8AONB0GviZZ1asOI_IHGfNOJje_MQZYxSfoD6y1KJAlhir.jpg?size=807x538&quality=96&type=none",
        imgSlide3: "https://sun9-west.userapi.com/sun9-5/s/v1/ig2/VLnhS9G2_c8oLT0ZJIWcUx_yHDT97BZc-RhlOqj9uczWdg3l6gFYvMN7EQMLIiFPBrz-C2M7hjXXxpiDu49AC4ml.jpg?size=807x538&quality=96&type=none",
        desc: 'desc',
        popup_bg: 'popup__bg2',
        popup: 'popup2',
        popup_open: 'popupOpen2'
    },

]
const list = document.querySelector('#list')

let data = ''

items.forEach(item => {
    data += `<div class="u-container-style u-hover-feature u-list-item u-repeater-item u-list-item-2" 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-1">`
    data += `       <img alt="" class="u-expanded-width u-image u-image-default u-image-1" data-image-width="368" data-image-height="374" src=${item.icon} 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>`
})
items.forEach(item => {
    data += `   <div class="${item.popup_bg}">`
    data += `   <div class="${item.popup}">`
    data += `       <button id="close-popup"><img src="/images/close.png" alt=""></button>`
    data += `       <div id="test">`
    data += `           <div class="slideshow-container">`
    data += `               <div class="mySlides fade">`
    data += `                   <div class="numbertext"></div> <img class="imgSlide" src=${item.imgSlide} alt="">`
    data += `               </div>`
    data += `               <div class="mySlides fade">`
    data += `                   <div class="numbertext"></div> <img class="imgSlide" src=${item.imgSlide2} alt="">`
    data += `               </div>`
    data += `               <div class="mySlides fade">`
    data += `                   <div class="numbertext"></div> <img class="imgSlide" src=${item.imgSlide3} alt="">`
    data += `               </div> <a class="prev" >&#10094;</a> <a class="next" >&#10095;</a> </div>`
    data += `           <br>`
    data += `           <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>`
    data += `           </div>`
    data += `           <h2 class=" u-text u-text-default u-text-1">${item.title}</h2>`
    data += `           <p class="u-text u-text-2">${item.price}</p>`
    data += `           <p class="u-text u-text-2">${item.desc}</p>`
})
list.innerHTML = data


let popupBg = document.querySelector('.popup__bg'); // Фон попап окна
let popup = document.querySelector('.popup'); // Само окно
let openPopupButtons = document.querySelectorAll('#popupOpen1'); // Кнопки для показа окна
let closePopupButton = document.querySelector('#close-popup'); // Кнопка для скрытия окна
openPopupButtons.forEach((button) => { // Перебираем все кнопки
    button.addEventListener('click', (e) => { // Для каждой вешаем обработчик событий на клик
        e.preventDefault(); // Предотвращаем дефолтное поведение браузера
        popupBg.classList.add('active'); // Добавляем класс 'active' для фона
        popup.classList.add('active'); // И для самого окна
    })
});
closePopupButton.addEventListener('click',() => { // Вешаем обработчик на крестик
    popupBg.classList.remove('active'); // Убираем активный класс с фона
    popup.classList.remove('active'); // И с окна
});
document.addEventListener('click', (e) => { // Вешаем обработчик на весь документ
    if(e.target === popupBg) { // Если цель клика - фот, то:
        popupBg.classList.remove('active'); // Убираем активный класс с фона
        popup.classList.remove('active'); // И с окна
    }
});

let popupBg2 = document.querySelector('.popup__bg'); // Фон попап окна
let popup2 = document.querySelector('.popup2'); // Само окно
let openPopupButtons2 = document.querySelectorAll('#popupOpen2'); // Кнопки для показа окна
let closePopupButton2 = document.querySelector('#close-popup'); // Кнопка для скрытия окна
openPopupButtons2.forEach((button) => { // Перебираем все кнопки
    button.addEventListener('click', (e) => { // Для каждой вешаем обработчик событий на клик
        e.preventDefault(); // Предотвращаем дефолтное поведение браузера
        popupBg.classList.add('active'); // Добавляем класс 'active' для фона
        popup2.classList.add('active'); // И для самого окна
    })
});
closePopupButton.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'); // И с окна
    }
});

у меня для всех карточек одно и тоже окно, как это нормально реализовать??
нужно еще как-то циклом вывести все товары и одновременно для них всплывающие окна, чтобы не повторяться несколько раз

Comments

[scottparker]

потому что кто-то накосячил при копипасте, пропустив в одном месте popupBg, и не добавив 2.

p. s. а если на странице будет 30 товаров, будет 30 раз копировать?

[chtopisatsuda]

scottparker, в этом вся проблема, я хочу выводить без копирования по 30 раз, но не знаю как, каким образом... Помогите пожалуйста

[chtopisatsuda]

scottparker, нужно как-то циклом вывести все товары и одновременно для них всплывающие окна

[YK21]

chtopisatsuda, циклом это правильно, но 30 всплывающих окон... не есть правильно

[chtopisatsuda]

YK21, тогда как сделать лучше

[YK21]

chtopisatsuda, всплывающие окна стоит показывать только по запросу пользователя, т.е. по _клику_ на товаре.
Маркетологи могут настаивать на показе при наведении мышью, но прдеставьте, что Вам надо навести мышь на какой-то управляющий элемент, а эти всплывашки не только мешают, но и не дают попасть по нужной кнопке - гррр!

Answer 1

[Данил Григорук]

Вам необходимо сверять любое из этих полей в обработчике событий по клику на карточку товара, но не в цикле (иначе нарушается логика, у вас повторения кода 30 раз не должно быть):
popup_bg: 'popup__bg',
popup: 'popup',
popup_open: 'popupOpen1'
Если после клика совпадает поле со значением попап окна, то всплывает необходимое из двух. Думаю понятно объяснил, если я правильно понял поставленный вопрос.

Comments

[chtopisatsuda]

как это сделать без цикла? Каким образом он будет находить кнопки из обьекта?

[chtopisatsuda]

chtopisatsuda, у меня классы всплывающего окна в обьекте прописаны

{
        title: 'Отдых в летнем комплексе',
        price: '1 000 ₽ / час',
        desc: 'desc',
        image: 'images/barbeku.png',
        popup_open: 'popupOpen7',
        popup: 'popup7',
        popup_bg: 'popup__bg7',
        id: '7'
    }

и как мне без цикла все это сделать, а я сам попытался у меня не одно окно открылось, а все сразу из обьекта которые

[Данил Григорук]

chtopisatsuda, с работы вернусь, напишу вам рабочий вариант решения вашей задачи