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

Question

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

我试过这个代码：

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);
});

但是当在更改函数中输入此代码时（请参阅小提琴），它会显示巨大的数字，就像将一个数字加到另一个数字一样。当它在那个函数之外时，什么也不会发生。
如何正确计算带数量的全价？

Answer 1

试试这个：

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

Answer 2

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

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

Answer 3

尝试将以下代码放入名为 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); 
}

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

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

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

当正文发生变化时（这是 DOM 中已加载的元素），您调用 TotalPrice() 函数并计算总价。这不是我猜的最佳解决方案。所以我很感激你的建议。

jsFiddle

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

Calculate price based on input number (quantity) change

javascript

jquery