2016-02-07 59 views
0

我正在學習和理解js/jquery操作,今天我在簡單的函數問題上放棄了我的想法。以javascript報價形式顯示總值

我想創建一種報價表格,在窗體下方顯示一個自動更新的計算價格,具體取決於選中/未選中的框,單選按鈕和表單中的數字輸入。

這裏是*有點*工作示例:

CSSdeck

在這個例子中,我可以顯示我的項目總價格(項目數* ITEMPRICE VAR),我的總價格(複選框和單選按鈕總值)。我想,我的總價格包括項目每個事件的總價:

  • $("input:checkbox, input:radio").click
  • $('#nbItems').change

我的另一個問題是,我的+和 - 我輸入的每個側面按鍵與互動它的內容,但沒有與項目的總價格,儘管許多不成功的嘗試:(

這是另一個編輯我的calcTotal()函數的嘗試,但我顯然理解/做錯了什麼...:

CSSdeck

預先感謝您非常的幫助

+2

歡迎SO。請在此發佈相關代碼,因爲破碎的鏈接對於未來的用戶無用。 SO也有一個代碼片段編輯器。編輯時點擊小圖片框 – mplungjan

回答

1

您需要使用您的按鈕

更改這個代碼片段更改值後使用jQuery的trigger()功能:

$('#cnt-up').click(function() { 
    itemsAmount.val(Math.min(parseInt($('#nbItems').val()) + 1, 20)); 
    $("#nbItems").trigger("change"); // add this line 
}); 
$('#cnt-down').click(function() { 
    itemsAmount.val(Math.max(parseInt($('#nbItems').val()) - 1, 0)); 
    $("#nbItems").trigger("change"); // add this line 
}); 

這會觸發change事件,該事件稍後將在您的代碼中處理

在你的問題的另一部分,不斷更新總量,改變calcTotal()功能:

function calcTotal(){ 

total = 0; // reset 

    $("input:checked").each(function() 
    { 
     //This happens for each checked input field 
     var value = $(this).attr("value"); 
     total += parseInt(value); 

    }); 

total += $("#nbItems").val() * itemPrice; 
} 

,並從$("#nbItems").change()事件稱之爲:

$('#nbItems').change(function(){ 
    $('#result').text($(this).val() * itemPrice); 
    calcTotal(); 
    $('#total').text(total); 
});