與簡單的jQuery計算器的故障

-1

我試圖在jQuery上做簡單的計算，它將根據輸入字段中的輸入值和檢查值計算總價格。這是我簡化的一段代碼，但它不起作用。我犯了什麼錯誤。謝謝。這是JSFiddle。與簡單的jQuery計算器的故障

$(document).ready(function(){ 
 
    var total = 0; 
 
    var totalextras = 0; 
 
    var rmnumber = 0; 
 
    var bmnumber = 0; 
 

 
    $('.extras').click(function(){   
 
     $('.extras:checked').each(function(){ 
 
      totalextras += parseInt($(this).val());    
 
     }); 
 
    }); 
 

 
    $('#rm').on('change',function(){ 
 
     rmnumber = parseInt($(this).val()); 
 
    }); 
 

 
    $('#rm').on('change',function(){ 
 
     bmnumber = parseInt($(this).val()); 
 
    }); 
 

 
    total = totalextras + rmnumber + bmnumber; 
 
    $('#total').text(total); 
 
});

<input type='number' id='rm'> 
 
<input type='number' id='bm'><br> 
 
<div class='extra'> 
 
    <label>first</label> 
 
    <input class='extras' type='checkbox' value='100'> 
 
    <label>second</label> 
 
    <input class='extras' type='checkbox'value='500'> 
 
    <label>therd</label> 
 
    <input class='extras' type='checkbox'value='1000'> 
 
    <label>forth</label> 
 
    <input class='extras' type='checkbox'value='1200'> 
 
</div> 
 
<p id='total'>0</p>

來源

2015-08-20 MuradV

請說明問題。 *它不起作用*不足以診斷您的問題。您應該在這裏明確地發佈來自您的JS控制檯的任何錯誤，以幫助回答您的問題。 – BenM

我真的不知道你的計算器應該做什麼。請提供*準確的*和*完整的*問題描述，以便我們可以正確地診斷它。 – asdf

問題是，你沒有更新每次更改#total。還有其他引起問題的語法錯誤。我會在一分鐘內發佈答案。 – Stef

您需要將總的每一次更新輸入的變化。你的代碼也可以縮小到幾行。

$(document).ready(function() { 
    var total = 0; 

    $('input').on('change', function() { 
    total = 0; // Reset the total every time an input changes 

    // Check the value of each checkbox 
    $('input[type="checkbox"]:checked').each(function() { 
     total += parseInt($(this).val()); 
    }); 

    // Check the value of each number field 
    $('input[type="number"]').each(function() { 
     total += $(this).val() ? parseInt($(this).val()) : 0; 
    }); 

    $('#total').text(total); 
    }); 
});

http://jsfiddle.net/huwmju01/4/

編輯：更新以反映重置號字段值，以避免輸出的NaN鄧肯Tidd的建議。通過遍歷每個數字字段類型，就像我們對複選框進行迭代一樣縮短了整個事情。

來源

2015-08-20 22:06:58 Stef

不錯。我建議OP在#rm＆#bm上設置一個初始值以避免NaN，如果其中任何一個輸入都不需要的話。 –

肯定！偉大的建議 – Stef

我注意到一些邏輯錯誤在你的代碼（固定他們爲你以及）：

你對你的$('.extras:checked')選擇缺少.。（編輯：只有您提供的小提琴，後已被修正）
您要爲$('#rm')設置一個onchange事件處理兩次，我覺得你的第二個意思$('#bm')。

現在，除了這些錯誤，這裏就是爲什麼你的代碼將無法正常工作：

您的代碼$('#total').text(total);只運行一次，那是在頁面加載時。因爲你直接在$(document).ready()之內。相反，你需要把它放在on('change')之內。

以下是更正代碼：

$(document).ready(function(){ 
    var total; 
    var totalextras=0; 
    var rmnumber, bmnumber; 

    $('.extras').click(function(){ 
     $('.extras:checked').each(function(){ 
      // Change to "+=" if you want the number to keep increasing 
      totalextras = parseInt($(this).val()); 
     }); 

     // Bonus: If you want to re-calculate when checkbox clicked 
     total = totalextras + (rmnumber + bmnumber); 
     $('#total').text(total); 
    }); 

    $('#rm').on('change',function(){ 
     rmnumber = parseInt($(this).val()); 
     total = totalextras + (rmnumber + bmnumber); 
     $('#total').text(total); 
    }); 

    $('#bm').on('change',function(){ 
     bmnumber = parseInt($(this).val()); 
     total = totalextras + rmnumber + bmnumber; 
     $('#total').text(total); 
    }); 

});

小提琴：http://jsfiddle.net/unf21wak/6/

來源

2015-08-20 22:11:08

與簡單的jQuery計算器的故障

回答

相關問題