我想創建一個簡單的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我剛更新了答案。請檢查一次？這是我的一個小錯誤。 –