Чем можно заменить querySelector, чтобы получить нужный вариант?

Question

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

<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 месяца (этот писал в основном по мануалам). Насколько я понимаю мне нужно реализовать делегирование, но я не понимаю как это сделать.

Answer 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 для определения переменных, ведь вы нигде их не меняете.

БЛОГ НА HUSL

Чем можно заменить querySelector, чтобы получить нужный вариант?

Ответы (1 шт):