從多個輸入字段中減去值

我正在使用以下代碼來獲取一個字段的值，從另一個字段的值中減去它並顯示結果。從多個輸入字段中減去值

$(document).ready(function() { 

    var numIn; 
    var numOut; 
    var total; 

    $('#submit').click(function() { 
     numIn = $('input.in').val(); 
     numOut = $('input.out').val(); 
     total = numIn-numOut; 

     $('span').remove(); 
     $('body').append('<span>&#163;'+total+'</span>'); 
     $('span').fadeIn(250); 
    }); 
});

我想創建一種收入/支出計算器。所以我的問題是，如果我有多個收入領域和多個支出領域，我將如何從收入領域的總價值中去除支出領域的總價值。

這裏是一個示例表格，以防我不清楚。

<form> 
<input class="in" type="text"> 
<input class="in" type="text"> 
<input class="in" type="text"> 
<input class="in" type="text"> 
<input class="out" type="text"> 
<input class="out" type="text"> 
<input class="out" type="text"> 
<input class="out" type="text"> 
<input type="submit" id="submit" value="Submit">

來源

2010-09-15 DaveKingsnorth

檢查你從$（'input.in'） - >是第一個輸入嗎？它是這個類的所有元素的數組嗎？ – 2010-09-15 14:06:59

你可以遍歷所有的.in和.out領域，你去添加自己的價值觀。

實施例：http://jsfiddle.net/tXPeg/3/

var numIn = 0; 
var numOut = 0; 
var total; 

$('#submit').click(function() { 
    $('input.in').each(function() { 
     return numIn += (parseFloat(this.value) || 0); 
    }); 
    $('input.out').map(function() { 
     return numOut += (parseFloat(this.value) || 0); 
    }); 
    total = numIn - numOut; 

    $('span').remove(); 
    $('body').append('<span>&#163;' + total + '</span>'); 
    $('span').fadeIn(250); 
    return false; 
});

編輯：更改爲使用parseFloat()代替parseInt()。

來源

2010-09-15 14:15:36 user113716

謝謝，這工作完美。我只需在點擊函數中聲明變量，以便在您重新提交表單時重置它們。 – DaveKingsnorth 2010-09-15 14:32:52

@Dave - 不客氣。：o） – user113716 2010-09-15 14:40:14

嘿帕特里克，看看我下面的例子。對不起，作爲一個jQuery和stackoverflow n00b（我很肯定回答你自己的問題不是你的意思，以增加另一個例子的線程） – DaveKingsnorth 2010-09-15 15:10:07

實際上經過一段時間的測試後，唯一的問題是，如果一個或多個字段empy它返回'NaN'。

我嘗試添加條件語句來檢查該字段有一個值，但沒有運氣：隨意編輯自己的例子：http://jsfiddle.net/QaEcD/3/

$('#submit').click(function() { 
    var numIn = 0; 
    var numOut = 0; 
    var total = 0; 

    $('input.in').each(function() { 
     if($(this).val().length !== 0){ 
      return numIn = numIn + parseInt(this.value); 
     }); 
    }); 
    $('input.out').map(function() { 
     if($(this).val().length !== 0){ 
      return numOut = numOut + parseInt(this.value); 
     }); 
    }); 

    total = numIn-numOut; 

    $('span').remove(); 
    $('body').append('<span>&#163;'+total+'</span>'); 
    $('span').fadeIn(250); 
    return false; 
});

}）;

來源

2010-09-15 14:53:49 DaveKingsnorth

從多個輸入字段中減去值

回答

相關問題