使用JavaScript获取元素动态类名称的总和

我正在处理一个在按下按钮时添加行的表。在新行中,元素类名称取决于下拉菜单的选择。这些类的命名如下:

 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存储库,其中包含所有文件:

回答如下:

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

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/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>

使用JavaScript获取元素动态类名称的总和

我正在处理一个在按下按钮时添加行的表。在新行中,元素类名称取决于下拉菜单的选择。这些类的命名如下:

 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存储库,其中包含所有文件:

回答如下:

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

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/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>