我有多个选择,用产品和价格填充表单。然后我正在计算所有产品的全价,这工作正常,但是数量表格中有数字输入字段,我无法根据产品数量计算价格。
这是小提琴: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);
});