0

Всем привет. Есть карточки товаров со структурой:

<article class="cards__article article">
    <div class="article__img">
        <img class="article__pic" src="icons/pepper.svg" alt="Pepper">
    </div>
    <div class="article__description">
        <h2 class="article__title">Pepper</h2>
        <p class="article__text">Goes well with pasta</p>
    </div>
    <div class="article__btns">
        <button class="article__button buy-btn">Buy</button>
        <button class="article__button info-btn">Info</button>
    </div>
</article>

<div class="b-pop">
    <div class="b-pop__inner">
        <div class="b-pop__body">
            <button class="b-pop__close-btn"></button>
        </div>
    </div>
</div>

По клику на кнопку с классом article__button появляется popup. В карточках есть div с img. Хочу, что бы в popup отображался div с img, но только из соответствующей карточки товара. Реализовать хочу на чистом JS.

Буду очень благодарен за помощь!

Спасибо

5
  • Где ваш popup? Как пытались это реализовать и с чем возникли сложности?
    – SwaD
    25 фев в 14:49
  • @SwaD разметку popup добавил в описание вопроса. С реализацией отображения popup нет. Сложности возникли при попытке реализовать то, что я описал в вопросе. Не могу найти информацию, которая натолкнула бы на то, как это сделать.
    – El Jeko
    25 фев в 14:52
  • @SwaD я пытаюсь понять как обратиться к div с img из той же карточки товара, где и кнопка, по которой был клик.
    – El Jeko
    25 фев в 15:18
  • Например или это - Вешаете слушателя на кнопку и при клике берете значение src из img текущего блока и вставляете в нужное место в попапе. А вот тут можно найти пример, как динамически рендерить данные и привязываться к ним тут или тут
    – SwaD
    25 фев в 15:23
  • @SwaD спасибо большое. Буду смотреть.
    – El Jeko
    25 фев в 16:26

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.