搬家公司网站JavaScript/Handlebars总容积计算问题求助

核心问题分析 #

bug根源在于：减号按钮的点击事件未判断当前家具数量是否为0，直接执行了容积扣除逻辑，导致即使数量为0，总容积仍被错误减少。

具体修复步骤 #

假设你的原有减号按钮事件处理代码是类似下面的错误写法：

// 错误示例：无数量判断的减号逻辑
document.querySelectorAll('.decrease-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const item = this.closest('.furniture-item');
    const quantityEl = item.querySelector('.quantity');
    const volume = parseFloat(item.dataset.volume);
    let quantity = parseInt(quantityEl.textContent);
    
    quantity--; // 直接减，不管是否为0
    quantityEl.textContent = quantity;
    totalVolume -= volume; // 直接扣容积
    updateTotalVolumeDisplay(totalVolume);
  });
});

修复后的代码

给减号逻辑加上数量大于0的判断，仅满足条件时才执行数量减少和容积扣除：

document.querySelectorAll('.decrease-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const item = this.closest('.furniture-item');
    const quantityEl = item.querySelector('.quantity');
    const volume = parseFloat(item.dataset.volume);
    let quantity = parseInt(quantityEl.textContent);
    
    // 关键判断：仅当数量>0时，才允许减少操作
    if (quantity > 0) {
      quantity--;
      quantityEl.textContent = quantity;
      totalVolume -= volume;
      updateTotalVolumeDisplay(totalVolume);
    }
    // 数量为0时，直接忽略点击操作
  });
});

额外优化建议 #

• 给数量为0时的减号按钮添加disabled属性，从UI层面提示用户按钮不可用，避免无效点击：

<!-- Handlebars模板中动态设置disabled属性 -->
<button class="decrease-btn" {{#if (eq quantity 0)}}disabled{{/if}}>-</button>

同时在JS的数量更新逻辑中同步按钮状态：

// 在数量更新后添加
this.disabled = quantity === 0;

验证要点 #

1. 选中某家具（数量>0），点击减号到0，总容积需正确扣除至对应值
2. 数量为0时，点击减号按钮，总容积无变化、数量保持0
3. 多次点击数量为0的减号，总容积不会出现负数或异常清零

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