Как получать определенные данные 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]

const wrapperSelector = 'селектор блока с товаром, вам виднее, каким он должен быть';
const quantitySelector = '.cart_qty';
const totalSelector = '.shopcart__item-total';

$(wrapperSelector).on('change', quantitySelector, e => {
  $(totalSelector, e.delegateTarget).text(function() {
    return e.target.value * this.dataset.price;
  });
});

// или

document.querySelectorAll(quantitySelector).forEach(function(n) {
  n.addEventListener('change', this);
}, ({ target: t }) => {
  const total = t.closest(wrapperSelector).querySelector(totalSelector);
  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);
});