Один файл JS для расчетов

Question

У меня есть файл JS (который использует каркас JQuery), который представляет собой простое уравнение для расчета соответствующих значений.

ФАЙЛ JS (образец):

var colorOneRed = parseFloat($('#colorOneRed').text()); ...

var totalRed = (parseFloat(colorOneRed) + parseFloat(colorTwoRed) ...

$('#totalColorRed').text(totalRed); ...

У меня одно и то же точное уравнение несколько раз, меняются только цвета. То же самое уравнение используется для зеленого var colorGreen, синий, фиолетовый и т. д.

У меня вопрос, могу ли я написать только одно уравнение, чтобы охватить все переменные и #id'sвместо этого писать одно и то же уравнение снова и снова.

Я попробовал id^='totalcolor' метод, например, но он будет рассчитывать только одну переменную. Так что я имею в виду, если #colorOneRed имеет значение 40 но #colorOneGreen имеет значение 60 он будет рассчитывать только одно значение для всех, используя id^=colorOne метод.

Я не уверен, что это даже возможно, но я надеюсь иметь одно уравнение, которое сможет рассчитать все greens и один для всех blues и так далее.

Заранее благодарю за любую помощь.

Answer 1

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

Answer 2

Поместите расчет в одну функцию:

function calc(displayElt, color){
var total=parseFloat($('#colorOne'+color).text()) + parseFloat($('#colorTwo'+color).text())+..
$('#'+displayElt).text(total);
}

calc(totalColorRed,Red);

Answer 3

Оберните ваш код в функцию, где вы передаете необходимые элементы DOM для выполнения вычислений:

function calculate(colorOneElement, totalElement) {

    var colorOne = parseFloat($(colorOneElement).text()); ...

    var total = (parseFloat(colorOneRed) + parseFloat(colorTwoRed) ...

    $(totalElemenet).text(totalRed); ...

}

Использование следующим образом:

calculate(document.getElementById("colorOneRed"),
        document.getElementById("totalOneRed"));

calculate(document.getElementById("colorOneGreen"),
        document.getElementById("totalOneGreen"));

так далее...