Handlebars+原生JS实现独立计数器遇阻，求解决方案

完全可以用Handlebars结合原生JS实现每个物品的独立增减计数器，核心问题是你之前的代码可能只绑定了第一个元素的事件，解决思路是事件委托+数据属性区分物品，不用写重复代码。

步骤1：修改Handlebars模板，添加唯一标识 #

给每个计数器元素绑定物品的唯一ID作为数据属性，确保每个按钮和数量框能关联到对应物品：

<div id="items-container">
  {{#each movingItems}}
  <div class="item-card">
    <h4>{{name}}</h4>
    <button class="count-btn decrease" data-item-id="{{id}}">-</button>
    <span class="quantity-display" data-item-id="{{id}}">{{quantity}}</span>
    <button class="count-btn increase" data-item-id="{{id}}">+</button>
    <p>单件搬运费: ¥{{unitCost}}</p>
  </div>
  {{/each}}
</div>
<p id="total-cost">预估总成本: ¥0</p>

步骤2：原生JS用事件委托实现统一处理 #

把事件绑定到父容器上，通过点击源的data-item-id区分物品，维护一份全局物品数据同步状态，避免重复绑定事件：

// 初始化物品数据（和Handlebars渲染的数据源一致）
const items = {
  1: { id: 1, name: "冰箱", quantity: 0, unitCost: 250 },
  2: { id: 2, name: "双人床", quantity: 0, unitCost: 180 },
  3: { id: 3, name: "衣柜", quantity: 0, unitCost: 300 }
};

// 绑定父容器的点击事件（事件委托）
document.getElementById("items-container").addEventListener("click", (e) => {
  const itemId = e.target.dataset.itemId;
  if (!itemId) return; // 点击的不是计数器按钮，直接返回

  const targetItem = items[itemId];
  // 处理增减逻辑
  if (e.target.classList.contains("increase")) {
    targetItem.quantity++;
  } else if (e.target.classList.contains("decrease") && targetItem.quantity > 0) {
    targetItem.quantity--;
  }

  // 更新DOM中的数量显示
  document.querySelector(`.quantity-display[data-item-id="${itemId}"]`).textContent = targetItem.quantity;
  
  // 实时计算总成本
  updateTotalCost();
});

// 计算并更新总成本
function updateTotalCost() {
  let total = 0;
  Object.values(items).forEach(item => {
    total += item.quantity * item.unitCost;
  });
  document.getElementById("total-cost").textContent = `预估总成本: ¥${total}`;
}

为什么之前的代码只生效第一个？ #

如果之前用document.querySelector('.count-btn')或者getElementById，只会选中第一个匹配的元素，而事件委托是监听父容器的所有点击，通过dataset判断触发源，不管Handlebars渲染多少个物品，都只需要绑定一次事件，零重复代码。

替代技术方案（若后续需求复杂） #

如果你的搬家系统后续需要添加订单存储、用户管理等功能，推荐用Node.js + Express.js + 前端框架的组合：

• 用Express.js搭建后端API，负责物品数据管理、订单存储等；
• 前端替换Handlebars为Vue/React这类框架，它们的响应式数据绑定能更高效地实现独立计数器，无需手动操作DOM，代码更简洁（比如Vue的v-for循环+数据绑定，直接修改物品数量就能自动更新视图）。

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