0

Есть разметка:

<div class="modal-sale">
    <div class="modal-sale-elements">
        <h3>Бутылка 1 литр</h3>
        <button class="modal-sale-elements-btn" data-price="546">
            <span class="modal-sale-elements-btn-text">546 руб.
                <img class="modal-sale-elements-btn-icon" src="./img/shopping.png" alt="" width="24px" height="24px">
            </span>
        </button>
    </div>
    <div class="modal-sale-elements">
        <h3>Канистра 5 литров</h3>
        <button class="modal-sale-elements-btn" data-price="2450">
            <span class="modal-sale-elements-btn-text">2450 руб.
                <img class="modal-sale-elements-btn-icon" src="./img/shopping.png" alt="" width="24px" height="24px">
            </span>
        </button>
    </div>
    <div class="modal-sale-elements">
        <h3>Канистра 20 литров</h3>
        <button class="modal-sale-elements-btn" data-price="8600">
            <span class="modal-sale-elements-btn-text">8600 руб.
                <img class="modal-sale-elements-btn-icon" src="./img/shopping.png" alt="" width="24px" height="24px">
            </span>
        </button>
    </div>
</div>

Есть код:

productsBtn.forEach(el => {
el.closest('.modal-content').setAttribute('data-id', randomId());
el.addEventListener('click', (event) =>{
  let self = event.currentTarget;
  let parent = self.closest('.modal-content');
  let id = parent.dataset.id;
  let img = parent.querySelector('.modal-info-img').getAttribute('src');
  let title = parent.querySelector('.modal-sale-elements').textContent;      
  //console.log(e.target,e.target.dataset,e.currentTarget);
  let priceNumber = parseInt(event.currentTarget.dataset.price);
  plusFullPrice(priceNumber);
  console.log(price);
  printFullPrice();
  cartProductsList.querySelector('.simplebar-content').insertAdjacentHTML('afterbegin', generateCartProduct(img, title, priceNumber, id));

  printQuantity();
  
});

Выглядит это так: в модальном окне есть 3 строчки с описанием товара, у каждой строчки есть своя кнопка с ценой. Когда нажимаешь кнопку - товар уходит в корзину. В корзине отображается img, title и priceNumber (они обозначены в коде). Проблема заключается в том, что какую бы кнопку я не нажал - в корзину всегда идет первый заголовок. Как я понимаю, именно так и работает querySelector. С ценой реализация вот такая: parseInt(event.currentTarget.dataset.price), тут все работает как нужно. С img реализация устраивает, но вот что делать с title я искренни не понимаю.

Прошу вас не ругайтесь, если я что-то не правильно сделал описывая проблему - я код учу 2 месяца (этот писал в основном по мануалам). Насколько я понимаю мне нужно реализовать делегирование, но я не понимаю как это сделать.

1 ответ 1

1

Вы можете воспользоваться методом .closest так же, как вы получали элемент .modal-content.

productsBtn.forEach(el => {
el.closest('.modal-content').setAttribute('data-id', randomId());
el.addEventListener('click', (event) =>{
  let self = event.currentTarget;
  let parent = self.closest('.modal-content');
  let id = parent.dataset.id;
  let img = parent.querySelector('.modal-info-img').getAttribute('src');
  let title = self.closest('.modal-sale-elements').textContent;      
  //console.log(e.target,e.target.dataset,e.currentTarget);
  let priceNumber = parseInt(event.currentTarget.dataset.price);
  plusFullPrice(priceNumber);
  console.log(price);
  printFullPrice();
  cartProductsList.querySelector('.simplebar-content').insertAdjacentHTML('afterbegin', generateCartProduct(img, title, priceNumber, id));

  printQuantity();
  
});

И мне интересен вопрос, почему вы не используете const для определения переменных, ведь вы нигде их не меняете.

1
  • По неопытности.
    – Inii
    6 авг 2022 в 4:56

Ваш ответ

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

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