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

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

3 个答案: