使用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>
发布评论