点击加号累加商品数值时如何修改对应总计项的文本内容

现有代码存在以下几个导致功能失效的错误：

• 事件绑定错误：遍历加号按钮时调用的是全局addEventListener，没有把点击事件绑定到当前遍历的按钮实例上，点击后无法识别触发源
• 元素关联逻辑缺失：没有建立按钮和对应商品行的关联，每次点击都遍历全部商品元素，无法定位到当前操作的是哪一行商品
• 变量逻辑无效：定义的stop、total数组、第一个for循环的break位置都存在逻辑错误，循环第一次执行就会直接跳出，没有实际计算作用
• 类型缺失转换：直接读取DOM的文本内容是字符串格式，直接做计算会出现字符串拼接的异常结果
• 元素获取不全：减号按钮只通过querySelector获取了页面第一个，所有商品行的减号按钮都没有绑定事件

不需要硬编码7组商品的索引匹配逻辑，利用DOM节点的父子关联关系实现即可：点击按钮时，向上查找按钮所属的商品行容器，再在容器内部查找当前行的单价、数量、小计元素，单独更新当前行的数值，不管后续加多少组同结构商品，逻辑都能正常运行。

首先给显示商品数量的列加一个qty类，方便DOM查找（原有结构里数量列没有标识类，无法精准获取），单行商品结构参考：

<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>
  <!-- 新增qty类标识数量列 -->
  <div class="col qty">
    <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>

交互逻辑JS代码：

// 获取所有加、减操作按钮
const plusBtns = document.querySelectorAll(".plus-btn");
const minusBtns = document.querySelectorAll(".minus-btn");

// 绑定加号点击事件
plusBtns.forEach(btn => {
  btn.addEventListener("click", function() {
    // 定位当前按钮所属的商品行
    const currentRow = this.closest(".row");
    // 提取当前行内的对应元素
    const priceNode = currentRow.querySelector(".price p");
    const qtyNode = currentRow.querySelector(".qty p");
    const totalNode = currentRow.querySelector(".total-item p");

    // 转数值后计算
    const unitPrice = Number(priceNode.textContent);
    let qty = Number(qtyNode.textContent);
    qty += 1;
    const totalPrice = unitPrice * qty;

    // 更新页面内容
    qtyNode.textContent = qty;
    totalNode.textContent = `$ ${totalPrice.toFixed(2)}`;
  })
})

// 绑定减号点击事件
minusBtns.forEach(btn => {
  btn.addEventListener("click", function() {
    const currentRow = this.closest(".row");
    const priceNode = currentRow.querySelector(".price p");
    const qtyNode = currentRow.querySelector(".qty p");
    const totalNode = currentRow.querySelector(".total-item p");

    const unitPrice = Number(priceNode.textContent);
    let qty = Number(qtyNode.textContent);
    // 数量最小为0，不允许负数
    qty = qty > 0 ? qty - 1 : 0;
    const totalPrice = unitPrice * qty;

    qtyNode.textContent = qty;
    totalNode.textContent = `$ ${totalPrice.toFixed(2)}`;
  })
})

• 完全复用同结构商品行的DOM逻辑，不需要为每个商品单独写冗余代码，新增/删除商品行不需要修改JS逻辑
• 所有参与计算的文本内容都提前转为Number类型，避免字符串拼接导致的计算错误
• 金额通过toFixed(2)固定保留2位小数，符合常规金额展示规范
• 减号操作增加了非负判断，不会出现负数数量、负数金额的异常情况

内容的提问来源于stack exchange，提问作者Alin99