可克隆form中特定商品名称的数量总和计算技术问询

没问题，我来帮你搞定这个需求！针对这种可动态添加的表单容器，咱们可以通过统一标识类名+事件委托+遍历统计的方式来实现特定商品的数量总和计算。下面我给你完整的代码示例和关键逻辑解释：

核心思路 #

• 给所有商品名称下拉框统一加类名（比如product-name），数量输入框加类名（比如product-quantity），方便后续批量获取元素
• 用事件委托监听数量输入或商品选择的变化，实时触发计算
• 编写通用的求和函数，遍历所有表单容器，筛选出目标商品对应的数量并累加
• 确保克隆新表单时，新元素也能被事件监听覆盖

完整代码示例 #

HTML 结构 #

<!-- 基础表单容器模板 -->
<div class="product-container">
  <select class="product-name">
    <option value="">请选择商品</option>
    <option value="ABC">ABC</option>
    <option value="PQR">PQR</option>
    <option value="XYZ">XYZ</option>
  </select>
  <select class="product-attribute">
    <option value="属性1">属性1</option>
    <option value="属性2">属性2</option>
    <option value="属性3">属性3</option>
  </select>
  <input type="number" class="product-quantity" min="0" value="0">
  <button class="remove-container">删除</button>
</div>

<!-- 克隆按钮 -->
<button id="add-product">添加更多商品</button>

<!-- 总和展示区域 -->
<div class="sum-display">
  <p>ABC商品总数量：<span id="abc-total">0</span></p>
  <p>PQR商品总数量：<span id="pqr-total">0</span></p>
  <p>XYZ商品总数量：<span id="xyz-total">0</span></p>
</div>

JavaScript 逻辑 #

document.addEventListener('DOMContentLoaded', function() {
  const addBtn = document.getElementById('add-product');
  const containerTemplate = document.querySelector('.product-container');

  // 克隆表单容器的函数
  addBtn.addEventListener('click', function() {
    const newContainer = containerTemplate.cloneNode(true);
    // 清空新容器的输入值，恢复默认状态
    newContainer.querySelector('.product-name').value = '';
    newContainer.querySelector('.product-quantity').value = '0';
    // 添加删除按钮的事件
    newContainer.querySelector('.remove-container').addEventListener('click', function() {
      this.parentElement.remove();
      // 删除后重新计算总和
      calculateProductTotal();
    });
    containerTemplate.parentElement.appendChild(newContainer);
    // 克隆后立即计算一次总和
    calculateProductTotal();
  });

  // 给初始容器的删除按钮绑定事件
  document.querySelector('.remove-container').addEventListener('click', function() {
    if(document.querySelectorAll('.product-container').length > 1) {
      this.parentElement.remove();
      calculateProductTotal();
    } else {
      alert('至少保留一个商品表单哦');
    }
  });

  // 监听数量输入和商品选择的变化，实时计算
  document.addEventListener('input', function(e) {
    if(e.target.classList.contains('product-quantity') || e.target.classList.contains('product-name')) {
      calculateProductTotal();
    }
  });

  // 核心：计算特定商品的总数量
  function calculateProductTotal() {
    // 初始化各商品的总和为0
    const totals = {
      ABC: 0,
      PQR: 0,
      XYZ: 0
    };

    // 遍历所有商品容器
    document.querySelectorAll('.product-container').forEach(container => {
      const productName = container.querySelector('.product-name').value;
      const quantity = parseInt(container.querySelector('.product-quantity').value) || 0;
      
      // 如果商品名称在统计列表中，累加数量
      if(totals.hasOwnProperty(productName)) {
        totals[productName] += quantity;
      }
    });

    // 更新页面上的总和显示
    document.getElementById('abc-total').textContent = totals.ABC;
    document.getElementById('pqr-total').textContent = totals.PQR;
    document.getElementById('xyz-total').textContent = totals.XYZ;
  }
});

关键细节说明 #

• 事件委托：通过在document上监听input事件，不管是初始的还是克隆出来的新表单元素，都能触发计算，避免给每个新元素单独绑定事件的麻烦
• 数量处理：用parseInt()转换输入值，加上|| 0处理空值或非数字的情况，避免NaN影响计算
• 克隆后的重置：克隆新容器时要清空选择和输入值，不然会继承原容器的内容
• 删除限制：保留至少一个表单容器，避免出现无表单的情况

你可以根据自己的实际商品列表，修改totals对象里的商品名称，以及HTML中的下拉选项，适配你的业务需求。

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