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

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

这是小提琴：

我尝试使用以下代码：

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

但当这个代码被输入到change函数中时，它会显示大量的数字，就像一个接一个地添加一样。当它超出了这个功能，那么什么也不会发生。 我如何正确地计算数量的完整价格？

试试以下方法：

---

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

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

---

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

当主体发生变化时，即DOM中已加载的元素，调用TotalPrice函数并计算总价。我想这不是最好的解决办法。所以我很感激你的建议

---

在输入选择器上使用更改事件，然后执行计算并更新DOM。我还建议您为变量使用var，而不是分配给全局空间；不将基数指定为第二个参数的parseInt是一项风险业务：-请看，您的意思是基数是可选的，它是一个从2到36的数字，表示要使用的数字系统。parseInt'09'//等于0:-我只是说，如果OP使用parseInti，他应该意识到这一点。我刚刚在google chrome控制台中尝试了parseInt'0'=0和parseInt'09'=9，你所说的是不正确的！当我这样做的时候，这个结果就像在讨论中一样，如果它在更改时先滑入，则会产生巨大的数字，如果它的外部无法在电池电量低的手机上进行进一步测试，则不会发生任何事情。对不起，可能今天晚些时候，这工作正常，但当输入新的数量时，我需要它是可见的

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

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