根据输入数量(数量）变化计算价格

Calculate price based on input number (quantity) change

本文关键字：变化 计算 数量 输入      更新时间：2023-09-26

我有多个选择，用产品和价格填充表单。然后我正在计算所有产品的全价，这工作正常，但是数量表格中有数字输入字段，我无法根据产品数量计算价格。

这是小提琴：http://jsfiddle.net/fpm971fb/

我尝试使用此代码：

jQuery('input.selected-product-quantity').bind('focus blur select change click dblclick mousedown mouseup mouseover mousemove mouseout keypress keydown keyup', function(){
       pr=jQuery('.priceClass').text();
       nr=jQuery('.selected-product-quantity').val();
       calc=pr*nr;
       console.log(pr+"*"+nr);
       jQuery('.priceClass').html(calc);
});

但是当在更改函数中输入此代码时（参见小提琴），它会显示巨大的数字，就像它添加一个到另一个一样。当它超出该功能时，什么都不会发生。
如何正确计算全价和数量？

尝试将以下代码放入名为 TotalPrice（） 的函数中，

function TotalPrice(){
    var sum = 0;
    jQuery('.priceClass').each(function () {
    sum += Number(jQuery(this).text() * parseInt($(this).next().next().children("input").val()));
        console.log(sum);
    });
    jQuery(".fullPrice").html("<b>Full price: </b>" + sum); 
}

然后从选择元素更改内部调用它（此函数之前编码的位置）。

现在，由于元素是动态加载的，因此您将面临将事件与它们绑定的问题。所以我建议对此有点棘手。试试这种方式，

$("body").on("keyup", function(){
    TotalPrice();
});

当主体发生变化时（这是 DOM 中已经加载的元素），您调用 TotalPrice（） 函数并计算总价格。我想这不是最好的解决方案。所以我感谢建议。

js小提琴

试试这个： 

$('input.selected-product-quantity').change(function(){
  var quantity = $(this).val();
  var price = $('.priceClass').text();
  var calprice = parseInt(price) * parseInt(quantity);
  $('.priceClass').text(calprice);
});

尝试在进行任何计算之前将输入值转换为数字：

$('input.selected-product-quantity').on('change', function(){
    var pr = Number($('.priceClass').text());
    var nr = Number($('.selected-product-quantity').val());
    var calc = pr * nr;
    console.log(pr+"*"+nr);
    $('.priceClass').html(calc);
});
相关文章：