在Javascript中获取元素动态类名的总和

Question

我正在制作一张表格，只需按一下按钮即可添加行。在新行中，元素类名称取决于下拉菜单的选择。这些类的命名如下：

 let newRow = <tr><td class='fuel "+ACID+"'></td></tr>

其中 ACID 是主 HTML 页面上下拉菜单的选定索引的 ID。

我正在尝试编写一个函数来计算具有特定类名的每个元素的总和。这是我所拥有的：

const ACID = [Array of all possible ACID values];
let k = 0;
let ac_fuel = 0;
    ACID.forEach(element => {
        $('.fuel '+ACID[k]).each(function() {
            ac_fuel += parseFloat($(this).html());
            console.log(ac_fuel);
        })      
    k++

问题在于，这将每个 .fuel.ACID[k] 的总和加在一起。我想为每个班级分别计算金额。我提供了一个屏幕截图（底部的链接），其中包括一些注释、控制台日志和表格本身。我还包含一个包含所有文件的 GitHub 存储库：https://github.com/GregoryAESO/EmissionsCalculator/tree/gh-pages/Emissions%20Calculator

Answer 1

您可以对 ACID 数组使用 map 函数。映射函数使用元素变量遍历所有数组值并返回具有相同元素计数但已修改的数组，例如： 另请注意，应使用选择器 classA.classB 选择具有 2 个类的元素，不应使用 classNames 之间的空格

let ACID = ['T34', 'T454', 'AV8Bplus', 'AV8B', '']

const result = ACID.map(element => {
    let sum = 0;
    let collection;
    if(element ==='')
    {
      collection = $('.fuel')
            .filter(function(index){
                return $(this).attr("class").trim() == "fuel";
              })
    } else {
      collection = $('.fuel.'+element)
    }
  
    collection.each(function() {
        sum += parseFloat($(this).html());
    })  
  return {id: element, sum}
  })  
  
  console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = 'fuel T34'>15</div>
<div class = 'fuel T454'>33</div>
<div class = 'fuel AV8Bplus'>28</div>
<div class = 'fuel AV8B'>15</div>
<div class = 'fuel T34'>15</div>
<div class = 'fuel'>77</div>

它将为每个 ACID 元素返回一个总和数组。要进一步修改，您可以返回例如一个对象，包括 ACID 值：例如将return sum 替换为return {id: element, sum}，这将返回一个对象数组，如下所示：

[{id: 'id1', sum: 15},{id: 'id2', sum: 0} ]