如何在javascript中求和输入数字和数据库值

Question

我已附加数据，并在隐藏的输入中打印每个数据价格。 现在，我想将这些价格与输入数字作为数量求和，以得出总金额，但什么也没打印。

码

javascript

success:function(data) {
        //append data to my view
        data.forEach(function(row) {
            var $meto = '';
            $meto += '<div class="col-md-3 mt-2">'+
                '<div class="card">'+
                    '<div class="card-body">'+
                        '<img src="{{url("images")}}/'+row['photo']+'" class="menuimg img-fluid" alt="image">'+
                        '<p>'+row['name']+'</p>'+
                        '<input type="number" name="qty[]" class="qty form-control">'+
                        '<input type="hidden" class="price" value="'+row['price']+'" />'+
                    '</div>'+
                '</div>'+
            '</div>';
            $('.here').append($meto);

            //sum prices
            $('.qty').on('keyup',function(){
                var qty = $('.qty').val();
                var price = $('.price').val();
                $("#total").html(qty*price);
            });
        });
}

html

<div class="col-md-10">
  <div class="row here"></div>
</div>
<p>Total: <span id="total"></span></p>

说明

我已经用数量1 & 3填充了我的2个项目，每个项目下都有隐藏的输入保持价格（作为此示例，它们是5000 & 16000 ）

基本上，我应该在总div中添加以下内容：

1*5000 = 5000
3*16000 = 48000
Total = 53000

但是，它只会得到我的第一个输入，而忽略其余的输入。 有任何想法吗？

Answer 1

您未添加所有项目的价格。 您需要遍历所有项目并计算总计。

注意 ：在您的forEach语句之后保留此内容。 尝试这个：

$('.qty').on('keyup',function() {
    var quantities = $('.qty');
    var prices = $('.price');
    var total = 0;
   $.each(quantities, (index, qty) => {
        total += parseInt($(qty).val() || 0) * parseFloat($(prices[index]).val() || 0) 
    });
    $("#total").html(total);
});

Answer 2

我认为问题是，您无法使用“ .val（）”函数从多个元素中获取值。 您只能从一个元素中获取多个值。

您需要另一个功能来实现您想要的目标。

您应该在这里看看： Stackoverflow问题

Anway-您不应该将价格保存到生产环境中的隐藏html元素中。

Answer 3

遍历父元素以找到每个元素的确切价格和数量。

$('.qty').on('keyup',function(){
    var total = 0;
    $('.card-body').each(function(){
        var qty = parseFloat($(this).find('.qty').val());
        if (!qty) return;
        var price = parseFloat($(this).find('.price').val());
        total += (qty * price);
    });
    $("#total").html(total);
});

附加小提琴

Answer 4

我不了解jQuery，尽管我可以帮助您使用Vanilla JS。

这里的问题是：

$('.qty').on('keyup',function(){
            var qty = $('.qty').val();
            var price = $('.price').val();

            $("#total").html(qty*price);
         });

这将为第一个.qty设置事件侦听.qty ，即使其中有很多。 因此，您应该选择并遍历它们，就像处理数据一样：

let qtyNodes = document.querySelectorAll('.qty');
let priceNodes = document.querySelectorAll('.price');

let outputNode = document.querySelector('#total');
let sum = 0;

qtyNodes.forEach(function(qtyNode) { // Set event listener to every single qty node 

    qtyNode.addEventListener('keyup', function() {

        qtyNodes.forEach((qtyNode, index) => { // Calculate final price, using each meal price per quantity value.
            sum = qtyNode.value * priceNodes[index].value;
        })

    });

})

outputNode.innerHTML = `${sum}`;

重要的是，将类似数组的数组（ qtyNodes和priceNodes ）保持在给定的循环之外，因为它将在每次迭代时访问DOM，并且会要求过多的性能。 将其放置在外部，您将只能访问DOM一次。

另外，请注意：您应该使用“ input”事件，而不是“ keyup”事件。 用户插入任何数据后，就会触发输入事件，就像“ keyup”和“ keydown”的组合一样。