如何根据 JavaScript 中的条件添加数字

Question

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

例如类别 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>

Answer 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)
}

Answer 2

您的代码中有很多错误。 第一个问题是，在比较时 aaa 应该用双引号引起来。 此外，您无法以尝试获取“a”标签的方式获取它的属性。

另外，您将 noofarticle 设为 7。它是否适合您？ 如果有更多的元素进来怎么办？

请在下面查看我的解决方案。

<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>
// Get all the a tags
const a_tag = document.getElementsByTagName('a');
// you can further provide class to those a tags if you have other a tags as well
// const a_tag = document.getElementsByClassName('a-class');
// a-class is nothing but a simple css class.This will narrow down the elements to only the ones containing the class.
// Or you can use a query selector
let aaa = 0;
let bbb = 0;
let ccc = 0;
for (let index = 0; index < a_tag.length; index++) {
    const element = a_tag[index];
    let categorie = element.getAttribute('data-categorie');
    if(categorie === 'aaa') {
        aaa += Number(element.getAttribute('data-prix'));
    }
    if(categorie === 'bbb') {
        bbb += Number(element.getAttribute('data-prix'));
    }
    if(categorie === 'ccc') {
        ccc += Number(element.getAttribute('data-prix'));
    }
}
console.log(aaa, bbb, ccc);
</script>

直接在 html 文件中运行此代码应该会为您提供所需的 output。希望这能解决您的问题。

如果这有帮助，请投票。

谢谢