使用jQuery与CSS选择器统计带active类的按钮对应价格总和

原有代码的核心问题 #

• 用else if串联判断逻辑，只要匹配到第一个带active类的按钮就会终止后续判断，无法实现多按钮同时选中时累加总价的需求
• 类名判断方式不可靠：直接通过getAttribute("class") == "active"匹配类名，后续如果按钮新增其他类名就会完全失效，应该用classList.contains("active")方法判断是否包含指定类
• 选择器写法冗余错误：例如span #price是匹配span标签内部的id为price的元素，但id为price的元素本身就是span标签，同时不需要调用firstChild，直接取元素的textContent即可
• 代码可维护性差：逐个绑定按钮id写判断逻辑，后续新增删除按钮都需要修改大量代码

修复后的实现代码 #

你可以直接批量选中所有带active类的按钮，遍历累加对应价格，逻辑更简洁通用：

function showPrice() {
  let totalPrice = 0;
  // 直接选中所有带active类的按钮
  const activeButtons = document.querySelectorAll('button.active');
  // 遍历激活的按钮提取价格累加
  activeButtons.forEach(btn => {
    // 匹配按钮内部id以price开头的价格元素
    const priceElement = btn.querySelector('span[id^="price"]');
    if (priceElement) {
      totalPrice += Number(priceElement.textContent.trim());
    }
  })
  $("#amountInDollars").html(totalPrice);
}

// 页面加载完成后默认执行一次总价计算
$(document).ready(function() {
  showPrice();
  // 可选：绑定按钮点击切换激活状态的逻辑，点击后自动更新总价
  $('button').on('click', function() {
    $(this).toggleClass('active desactivate');
    showPrice();
  })
})

可选优化建议 #

如果后续需要频繁修改按钮结构，可以给所有价格span元素添加统一的类名，比如<span class="item-price" id="price">10</span>，这样价格选择器可以改为btn.querySelector('.item-price')，匹配更稳定，不受id命名规则变化影响。

内容的提问来源于stack exchange，提问作者Mohamed Ben Salma