代码之家 › 专栏 › 技术社区 › mafortis

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

html javascript

mafortis · 技术社区 · 5 年前

我有附加的数据,并在隐藏的输入中打印每个数据价格。现在我想把这些价格加上输入数字作为数量,以得到总金额,但没有打印。

代码

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 在每个价格下都有隐藏的输入(如此示例所示) 5000 & 16000 )

基本上,我的总分区应该是这样的:

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

但是,它只获取我的第一个输入并忽略其余的输入。有什么想法吗?

4 回复 | 直到 5 年前

Rakesh Makluri 5 年前

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

注释 :在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);
});

MrMaavin 5 年前

我认为问题是,您无法从多个元素中获得带有“.val()”函数的值。只能从一个元素中获取多个值。

你需要另一个你想要实现的功能。

你应该看看这里: Stackoverflow Question

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

varun agarwal 5 年前

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

$('.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);
});

附甲 Fiddle

João Lucas 5 年前

我不知道jquery,不过我可以帮你做香草JS。

这里的问题是:

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

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

这只是为第一个 .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。

另外,请注意:您应该使用“输入”事件,而不是“keyup”。输入事件将在用户插入任何数据时立即触发,就像“keyup”和“keydown”的组合一样。