innerHTML输出触发干扰：单个产品数量关联价格计算优化诉求

你的问题根源应该是代码里用了全局选择器或者共享变量，导致所有按钮触发了相同的逻辑。不用新增函数或额外CSS，最高效的方式是利用DOM层级关系，让每个按钮只操作自己所在的产品模块内的元素。

核心思路 #

1. 给每个产品模块套一个统一的容器类（比如product-item），把数量输入框、增减按钮、价格输出都放在这个容器里。
2. 给所有增减按钮用统一的类名（比如incr-btn、decr-btn），不用单独命名incr-btn_mobile_2这种专属类。
3. 点击按钮时，通过DOM遍历锁定当前按钮所属的产品容器，只在这个容器内操作对应的数量和价格元素，避免全局影响。

代码示例 #

假设你的HTML结构是这样的（可以适配你现有结构调整类名）：

<!-- 产品1 -->
<div class="product-item" data-unit-price="100">
  <button class="decr-btn">-</button>
  <input type="number" class="quantity-input" value="1">
  <button class="incr-btn">+</button>
  <div class="total-price">¥100</div>
</div>

<!-- 产品2 -->
<div class="product-item" data-unit-price="200">
  <button class="decr-btn">-</button>
  <input type="number" class="quantity-input" value="1">
  <button class="incr-btn">+</button>
  <div class="total-price">¥200</div>
</div>

对应的JavaScript逻辑：

// 给所有增减按钮绑定点击事件
document.querySelectorAll('.incr-btn, .decr-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮所属的产品容器
    const currentProduct = this.closest('.product-item');
    // 在容器内获取对应的数量输入、价格输出和单价
    const quantityInput = currentProduct.querySelector('.quantity-input');
    const totalPriceEl = currentProduct.querySelector('.total-price');
    const unitPrice = parseFloat(currentProduct.dataset.unitPrice);

    // 调整数量（防止数量小于1）
    let quantity = parseInt(quantityInput.value);
    if (this.classList.contains('incr-btn')) {
      quantity++;
    } else {
      quantity = Math.max(1, quantity - 1);
    }
    quantityInput.value = quantity;

    // 计算并更新当前产品的总价
    const totalPrice = unitPrice * quantity;
    totalPriceEl.textContent = `¥${totalPrice.toFixed(2)}`;
  });
});

方案优势 #

• 不用复制代码、重命名变量，所有产品共用一套逻辑，后期维护成本极低。
• 通过closest()和容器内选择器，精准锁定当前操作的产品，彻底解决“一触全动”的问题。
• 不需要额外添加CSS，仅需给产品模块加一个统一容器类（如果已有类似结构，甚至不用改HTML）。
• 支持动态新增产品（比如通过JS加载更多商品），只要结构一致，逻辑自动生效。

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