@Neolq

Динамически менять контента в popup?

Есть карточки с товаром, при клике на них, нужно вызывать popup и менять контент в нём(картинки в слайдере, текст и тд.).
В моём js, нужно отследить ко какой карточке был произведен клик и в соответствии с этим, менять наполнение.
Не могу понять как сделать что бы работало, не судите строго, если что-то неправильно, то было бы супер, если поможете разобраться.
614e35597d77c221377463.png
614e35603b052379150278.png

const cardRecommended = document.querySelectorAll('.recommended__card')
const popupRecommended = document.querySelector('.recommended__popup')
const popupPicture = document.querySelectorAll('.recommended-popup__picture')

for (let i = 0; i < cardRecommended.length; i++) {
   cardRecommended[i].addEventListener('click', function (e) {
      popupRecommended.classList.toggle('-open')

      if (cardRecommended[0]) {
         popupPicture[0].innerHTML = '<img src="img/recommended/peeler.png" alt="">'
         popupPicture[1].innerHTML = '<img src="img/recommended/peeler.png" alt="">'
         popupPicture[2].innerHTML = '<img src="img/recommended/peeler.png" alt="">'
      } else if (cardRecommended[1]) {
         popupPicture[0].innerHTML = '<img src="img/recommended/garlic-press.png" alt="">'
         popupPicture[1].innerHTML = '<img src="img/recommended/garlic-press.png" alt="">'
         popupPicture[2].innerHTML = '<img src="img/recommended/garlic-press.png" alt="">'
      }
   })
}


<div class="recommended__popup recommended-popup">
            <div class="recommended-popup__product">
                <div class="recommended-popup__slider">
                    <div class="recommended-popup__picture"></div>
                    <div class="recommended-popup__picture"></div>
                    <div class="recommended-popup__picture"></div>
                </div>
                <button class="recommended-popup__favorite-btn favorite-btn">
                </button>
                <div class="recommended-popup__arrows">
                    <button class="slider-arrow recommended-popup-arrow recommended-popup-arrow--next">
                    </button>
                    <button class="slider-arrow recommended-popup-arrow recommended-popup-arrow--prev">
                    </button>
                </div>
                <div class="recommended-popup__dots"></div>
            </div>
            <div class="recommended-popup__content">
                <div class="recommended-popup__title">julienne peeler</div>
                <div class="recommended-popup__price">26$</div>
                <div class="recommended-popup__text">Guessing is for fortune tellers. Prepare your food at a perfect temperature with Deiss thermometer.</div>
                <button class="recommended-popup__btn button--style-3">add to cart</button>
                <button class="recommended-popup__cross">
                </button>
            </div>
        </div>
  • Вопрос задан
  • 114 просмотров
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
по нормальному это нужно делать через бекенд. но раз уж костыляешь через фронт, то лучше всего тебе это сделать в виде табов. т.е. изначально создать в html все разновидности контента модалки и сделать им display: none; а потом просто при клике - нужный делать display: block.
p.s. чтобы картинки не грузились все сразу - сделай для них своеобразный lazy load. т.е. оставь src пустым, а путь к картинке задай в data-src атрибуте к примеру, а потом при открытии модалки именно в этом табе подменяй src
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы