Как получать определенные данные div блоков с одинаковыми классами?

Question

[bwylla]

Написал js скрипт который меняет цену товара при изменении количества, но кода добавляю второй товар и меняю количество первого, то цена меняется и у второго. В чем причина и как посчитать каждую позицию отдельно?

<div class="shopcart__item-quanity">
                  <select class="cart_qty">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                </div>   

                <div class="shopcart__item-unitprice">
                 1340
                </div>

                <div class="shopcart__item-discount">
                  200
                </div>

                <div class="shopcart__item-total" data-price = "1140">
                  1140
                </div>

$('.cart_qty').change(function() {
    var qty = this.value;
    console.log(qty)
 
    var total = $('.shopcart__item-total').attr('data-price');
    sum = Number(total) * qty;
    console.log(sum);
    $('.shopcart__item-total').html(sum);
});

Comments

[FeST1VaL]

Там где нажали берете родителя и в нем ищите нужный блок

Answer 1

[0xD34F]

$('.cart_qty').change(({ target: t }) => {
  $(t)
    .closest('селектор блока с товаром')
    .find('.shopcart__item-total')
    .text(function() {
      return t.value * this.dataset.price;
    });
});

или

document.querySelectorAll('.cart_qty').forEach(n => n.addEventListener('change', onChange));

function onChange({ target: t }) {
  const total = t.closest('селектор блока с товаром').querySelector('.shopcart__item-total');
  total.innerText = t.value * total.dataset.price;
}

Answer 2

[Let_peace]

<div class="shopcart__item-quanity">
                  <select class="cart_qty">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                  </select>
                </div>   

                <div class="shopcart__item-unitprice">
                 1340
                </div>

                <div class="shopcart__item-discount">
                  200
                </div>

                <div class="shopcart__item-total" data-price = "1140">
                  1140
                </div>

$('.cart_qty option').change(function() {
    var qty = this.value;
    console.log(qty)
 
    var total = $('.shopcart__item-total').attr('data-price');
    sum = parseInt(total) * qty;
    console.log(sum);
    $('.shopcart__item-total').html(sum);
});