如何在 JavaScript 中根据条件添加数字答案

【问题标题】：How to add numbers following a condition in JavaScript如何在 JavaScript 中根据条件添加数字
【发布时间】：2023-01-28 02:17:32
【问题描述】：

你好，我有一个不同类别的文章列表

例如类别 aaa 或 bbb 类别，和类别 ccc

我希望我能展示每个类别的数据价格总和

例如对于我应该拥有的 aaa 类别 3.20

对于类别 bbb 10.20

对于 ccc 类别 11.20

<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>
<script>
const nombrearticle = 7;
      for (let i = 0; i < nombrearticle; i++) {
         if (data-categorie=== aaa) {
            totalquantiteaaa += Number(data-prix) ;
         } else if (data-categorie=== bbb) {
            totalquantitebbb += Number(data-prix) ;
         }
         else if (data-categorie=== ccc) {
            totalquantiteccc += Number(data-prix) ;
         }
        }
</script>

【问题讨论】：

当您尝试自己编写这段代码时，您做到了多少？你在哪里卡住了？如果您分享您的代码，我们可以帮助您解决您的问题，并且我们可以帮助您理解任何错误或误解。请阅读“How to Ask“ 和 ”minimal reproducible example”指南。顺便说一下，如果 data-qte 和 onclick 属性与这个特定问题无关，您能否将它们编辑掉，以尽量减少我们正在读取和解析的代码？
谢谢你的回答我刚刚更改了我的代码
totalquantiteaaa、totalquantitebbb 和 totalquantiteccc 在哪里定义？另外，我会更改 if 语句以切换更容易阅读的代码，看起来你正在做小数，我会使用 parse float 然后格式化为 fixed
<a> 没有data-categorie 的属性值会怎样？另外，你能不能删除那些看起来不相关的属性（style、onclick 和data-qte）？如果这些属性是全部与......有关这个，具体问题请你解释如何，为什么？
您正在比较 ` if (data-categorie=== aaa) {, but haven't defined aaa; should it be a string? if (data-categorie=== "aaa") {`?

标签： javascript

【解决方案1】：

目前尚不清楚您缺少哪一部分，通常要做的是等到您可以更具体地说明。

我有时间杀人，所以我模拟了你的问题。我相信我已经涵盖了最有可能的问题：https://jsfiddle.net/eqr9jb5v/

细节：我们需要总价。如果该数据已经在某处的 javascript 中，请改用它，否则，我们可以收集它：

const categories = document.querySelectorAll('a[data-categorie]')
const totals = {}
for (let categorie of categories) {
    if(!(categorie.dataset.categorie in totals)) totals[categorie.dataset.categorie] = 0
  totals[categorie.dataset.categorie] += Number(categorie.dataset.prix)
}

可能是您的问题真正在回答“我如何向用户显示这些数据？”.有很多方法可以做到这一点，但这里是一个纯 javascript 的方式：

我们将创建一个 mojunt 点来显示类别：

<div slot="categories">&nbsp;</div>

我们将创建一个模板，以便可以一致地显示每个类别的总价：

<template id="categorie">
  <section>
    <header><h2>categorie - {categorie}</h2></header>  
    <p>total {sum}</p>
  <section>  
</template>

现在我们可以迭代我们的类别，并将每个类别应用于我们的模板，然后将其安装到我们的安装点：

Object.keys(totals).forEach(categorie => {
    mountTotal({ categorie, sum: totals[categorie]}) 
})

function mountTotal({categorie,sum}) {
  const fragment = template.content.cloneNode(true)
  const node = document.importNode(fragment, true)
  
  const title = node.querySelector('h2')
  title.innerText = title.innerText.replace(/{categorie}/, categorie)
  
  const content = node.querySelector('p')
  content.innerText = content.innerText.replace(/{sum}/, sum)
  
  mountPoint.appendChild(node)
}

【讨论】：