单个函数的所有小计的总和

Question

我有一个函数可以返回购物车中每件商品的小计（数量 * 价格），但是我正在努力将所有小计添加到最终总计。

我的小计是根据设置为 + 和 - 按钮的 HTML 输入值计算得出的

<div class="quantity">
  <button onclick="Input_ChangeValue(this, '-');" class="minus-btn">
    <img src="/img/shop/minus-btn.png" alt="#">
  </button>

  <input id="valueTest1" onchange="calculateSubTotal(this);" type="text" value="0" data-price="10.99">

  <button onclick="Input_ChangeValue(this, '+');" class="plus-btn" >
    <img src="/img/shop/plus-btn.png" alt="#">
  </button>
</div>

然后输出到小计div<div id="itemTotal1" class="subtotal-price">£0.00</div>

但是，当我尝试将单独项目的小计值推送到数组时，该函数只会看到最后一项递增，我最好在这里尝试某种 for 循环吗？

我的目标是让 .subtotal-prices 输出到

<div class="summary-total">
  <div class="total-title">Total</div>
  <div class="total-value final-value" data-price="0" id="basket-total">£0.00</div>
</div>

如果我在函数https://jsbin.com/dubociw/edit?html,js,output 中犯了错误，我将发布我的代码的工作sn-p

Answer 1

是的，您可以循环查找所有 .subtotal-price 项目，然后将它们相加得到总数。

    const subtotals = document.querySelectorAll(".subtotal-price");
    let total = 0;
    subtotals.forEach(subtotalItem => {
       const priceString = subtotalItem.innerText.replace("£", "");
       total += parseFloat(priceString);
    });
    const basketTotal = document.querySelector("#basket-total");
    basketTotal.innerHTML = total;

或者另一种方式是在购物车中存储一系列产品，包括数量和价格（如果需要，还包括产品 ID）。然后根据变化量操作数组并对总价格求和。通过这种方式，您可以使用数组在任何地方显示产品/价格/数量/小计，例如购物篮摘要中的小计。