Получить сумму элементов Dynami c имя класса в Javascript - PullRequest
Новая
       14

Получить сумму элементов Dynami c имя класса в Javascript

0 голосов
/ 30 апреля 2020

Я работаю над таблицей, которая добавляет строки нажатием кнопки. В новой строке имена классов элементов зависят от выбора раскрывающегося меню. Классы названы так: 

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

, где ACID - это идентификатор выбранного индекса раскрывающегося меню на главной странице HTML.

Я пытаюсь написать функцию, которая вычисляет суммы для каждого элемента с определенным именем класса. Вот что у меня есть: 

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

1 Ответ

0 голосов
/ 30 апреля 2020

Вы можете использовать функцию карты для массива ACID. Функция карты перебирает все значения массива, используя переменную элемента, и возвращает массив с тем же количеством элементов, но измененным, например: Также обратите внимание, что выбор элементов с 2 классами должен выполняться с использованием селектора classA.classB Пробелы между 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} ]
...