如何在JavaScript中按条件分类统计data-prix总和

原代码存在的问题 #

• 未初始化累加变量，直接使用会得到NaN
• 获取data-*属性的语法错误，应该用element.dataset而非data - categorie这种写法
• 字符串分类（如aaa）未加引号，会被解析为未定义变量
• 硬编码循环次数（7），如果元素数量变化就会出错
• 分类判断逻辑冗余，扩展性差

优化后的实现代码 #

HTML（保留原结构，无需修改）

<a style="cursor: pointer; " data-prix="2.10" data-qte="1" data-categorie="aaa" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="1.10" data-qte="1" data-categorie="aaa" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="3.10" data-qte="1" data-categorie="bbb" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="4.10" data-qte="1" data-categorie="" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">   ajouter au panier</a>
<a style="cursor: pointer; " data-prix="5.10" data-qte="1" data-categorie="ccc" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="6.10" data-qte="1" data-categorie="ccc" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="7.10" data-qte="1" data-categorie="bbb" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>

JavaScript（灵活计算各分类总价）

// 初始化存储总价的对象
const categoryTotals = {
  aaa: 0,
  bbb: 0,
  ccc: 0
};

// 获取所有带有data-categorie属性的a标签
const items = document.querySelectorAll('a[data-categorie]');

// 遍历每个商品元素
items.forEach(item => {
  const category = item.dataset.categorie;
  // 只处理目标分类，跳过空分类
  if (categoryTotals.hasOwnProperty(category)) {
    const prix = parseFloat(item.dataset.prix);
    // 累加总价，处理浮点数精度问题
    categoryTotals[category] = (categoryTotals[category] + prix).toFixed(2) * 1;
  }
});

// 输出结果
console.log('aaa分类总和:', categoryTotals.aaa);
console.log('bbb分类总和:', categoryTotals.bbb);
console.log('ccc分类总和:', categoryTotals.ccc);

运行结果 #

• aaa分类总和：3.20
• bbb分类总和：10.20
• ccc分类总和：11.20

说明 #

• 使用对象存储分类总价，新增分类时只需在categoryTotals里添加对应键即可，无需修改判断逻辑
• 用querySelectorAll动态获取元素，避免硬编码数量
• 用toFixed(2)处理浮点数精度问题，确保结果保留两位小数
• 跳过空分类，避免无效计算

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