我想创建一个简单的jQuery计算器，但它似乎并没有像我希望的那样工作。基本上它应该在输入框的价格为0时自动计算，然后在点击+/-时乘以。jQuery价格计算器
它似乎没有做任何事情或显示任何错误。
jQuery(document).ready(function(){
var qty = parseInt($('.qty').val());
var price = parseFloat($('#price').val());
$("#price").each(function(){
total += parseFloat(this.value);
});
http://jsfiddle.net/hktxyz5z/1/
我不知道如果我在思考，任何人有什么想法？
你需要给click事件里面的变量声明：
var qty = parseInt($('.qty').val());
var price = parseFloat($('#price').val());
的原因是，你是静态在第一负荷的值设置为0.00。每次增加或减少时，值都不会改变。它被设置一次，并在更改时不设置。点击事件发生后，它们不会动态更改。
解决的办法是把上面两行写入.click()函数中。
jQuery(document).ready(function(){
$("#price").each(function(){
total += parseFloat(this.value);
});
// This button will increment the value
$('.qtyplus').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[name='+fieldName+']').val(currentVal + 1);
qty = parseInt($('.qty').val());
price = parseFloat($('#price').val());
$('#total').val((qty * price ? qty * price : 0).toFixed(2));
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
qty = parseInt($('.qty').val());
price = parseFloat($('#price').val());
$('#total').val((qty * price ? qty * price : 0).toFixed(2));
}
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[name='+fieldName+']').val(currentVal - 1);
qty = parseInt($('.qty').val());
price = parseFloat($('#price').val());
$('#total').val(((qty * price > 0) ? qty * price : 0).toFixed(2));
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
qty = parseInt($('.qty').val());
price = parseFloat($('#price').val());
$('#total').val(((qty * price > 0) ? qty * price : 0).toFixed(2));
}
});
});
我不知道为什么你有两个价格箱子，但我已经更新了小提琴有1个，因为这会导致一些不寻常的行为。
但是，问题的根源在于你已经在document.ready上声明了qty和price，但是只要单击按钮就不会更新它们。下面是一个小提琴展示一个解决方案：
http://jsfiddle.net/hktxyz5z/2/
不过，我觉得你可以使整个事情更短和更清洁，减少的加号和减号按钮之间的代码重复。请继续关注与推荐的更新...
更新
这里是一个重构版本：
http://jsfiddle.net/hktxyz5z/3/
我所做的改变是：
<button>。adjustQty。adjustQty函数然后计算新的总数，并更新文本框。如果我错过了关于第二个价格框的目的明显的事情，请让我知道，我会调整我的示例。
更新2：
我猜你要添加了这两种价格的值，然后乘以数量？如果是这样，这个修改例子应该做的伎俩：
http://jsfiddle.net/hktxyz5z/4/
唯一的区别是，它计算出总的价格都箱它乘以数量前。
的jQuery提供的一个插件，可以帮助你：“jQuery的金属灰”
看它的笔画演示在这里：
http://prototype.xsanisty.com/calx2/
它仍然似乎并没有正常工作......当我是递减不会减少总数，也不会添加两个文本框来创建总数...在0它只显示21 .. – iyuyguyg
@iyuyguyg我刚更新了答案。请检查一次？这是我的一个小错误。 –