Как проще всего рассчитать общую цену и количество для нескольких товаров в javascript?

Question

У меня есть ряд входных данных, таких как:

<input type="number" name="qty[]" data-price="123.99" value="0" class="qtyfield" min="0">
<input type="number" name="qty[]" data-price="222.11" value="0" class="qtyfield" min="0">
<input type="number" name="qty[]" data-price="25.68" value="0" class="qtyfield" min="0">

, если кто-то выбирает количество из первого из 6 и второго примера количества из 8, мне нужно, чтобы промежуточная сумма была рассчитана как любая происходят изменения.

Answer 1

Если вы хотите получить итоговую сумму ваших количеств, взвешенную по значению data-price, вы можете просто прослушать изменения и обновить значение результата с помощью reduce() 'ed суммы входного поля, умноженной на data-price:

$('.qtyfield').on('change', () => {
   const total = [...$('.qtyfield')]
    .map(input => $(input).val()*$(input).attr('data-price'))
    .reduce((t,q) => t+q,0)
   $('#result').text(total)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="qty[]" data-price="1" value="0" class="qtyfield" min="0">
<input type="number" name="qty[]" data-price="2" value="0" class="qtyfield" min="0">
<input type="number" name="qty[]" data-price="3" value="0" class="qtyfield" min="0">
<div id="result"></div>

Примечание: Я изменил data-price значения для простоты