如何改变总文本内容时，从另一列添加值?

Question

所以我想做一个结帐页面，当我点击一个加号按钮时，价格保持固定，但每次我点击数量增加1，它就会增加总数。我可以通过编写一堆代码来做到这一点，但我有多个div具有相同的类"price"， "plus-btn"， "total-item"我用querySelectorAll进入JS。

我有7个这样的栏目，都有不同的价格:

let plusBtn = document.querySelectorAll(".plus-btn");
let minusBtn = document.querySelector(".minus-btn");
let priceItem = document.querySelectorAll(".price");
let totalItem = document.querySelectorAll(".total-item");
let price = priceItem;
let total = [];
let stop = 1;
// Each individual button will start addValue() function when button is clicked
plusBtn.forEach((plusBtn) => {
addEventListener("click", addValue);
});
function addValue() {
for (let i = 0; priceItem.length; i++) {
if (stop === 1) {
console.log("Plus button was clicked");
}
break;
}
for (let i = 0; i < priceItem.length; i++) {
total.push(priceItem[i].textContent);
}
return priceItem;
}

<div class="row text-center third-product-row my-2">
<div class="col">
<p>3</p>
</div>
<div class="col">
<p>Smart Speaker</p>
</div>
<div class="col">
<p>15</p>
</div>
<div class="col price">
<p>30</p>
</div>
<div class="col">
<p>0</p>
</div>
<div class="col total-item">
<p>$ 0.00</p>
</div>
<div class="col">
<button class="plus-btn"><i class="fa-solid fa-plus"></i>+</button>
<button class="minus-btn"><i class="fa-solid fa-minus">-</i></button>
</div>
</div>

Answer 1

每一行都有一个plus按钮，将其作为参考，以达到其他值，如价格，总额等;e.target参照点击button,e.target.parentElement.previousElementSibling参照点击<div class="col total-item"<p>$ 0.00</p></div>

let plusBtn = document.querySelectorAll(".plus-btn");
plusBtn.forEach((plusBtn) => {
plusBtn.addEventListener("click", addValue);
});
function addValue(e) {
/*console.log(e.target);
console.log(e.target.parentElement);
console.log(e.target.parentElement.previousElementSibling);*/
let _total = e.target.parentElement.previousElementSibling;
let _quantity = _total.previousElementSibling;
let _price = _quantity.previousElementSibling;
_total.firstElementChild.textContent =
"$ " + (parseFloat(_total.firstElementChild.textContent.slice(2)) + parseFloat(_price.textContent));
_quantity.firstElementChild.textContent = parseInt(_quantity.textContent) + 1;
}

<div class="row text-center third-product-row my-2">
<div class="col">
<p>3</p>
</div>
<div class="col">
<p>Smart Speaker</p>
</div>
<div class="col">
<p>15</p>
</div>
<div class="col price">
<p>30</p>
</div>
<div class="col">
<p>0</p>
</div>
<div class="col total-item">
<p>$ 0.00</p>
</div>
<div class="col">
<button class="plus-btn"><i class="fa-solid fa-plus"></i>+</button>
<button class="minus-btn"><i class="fa-solid fa-minus">-</i></button>
</div>
<div class="row text-center third-product-row my-2">
<div class="col">
<p>3</p>
</div>
<div class="col">
<p>Smart Speaker</p>
</div>
<div class="col">
<p>15</p>
</div>
<div class="col price">
<p>35</p>
</div>
<div class="col quantity">
<p>0</p>
</div>
<div class="col total-item">
<p>$ 0.00</p>
</div>
<div class="col">
<button class="plus-btn"><i class="fa-solid fa-plus"></i>+</button>
<button class="minus-btn"><i class="fa-solid fa-minus">-</i></button>
</div>
</div>
</div>