Javascript 从多个输入字段中减去值

我使用下面的代码获取一个字段的值，从另一个字段的值中减去它，然后显示结果

$(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);
    });
});

$（文档）.ready（函数（）{
var numIn；
var numOut；
总风险价值；
$（“#提交”）。单击（函数（）{
numIn=$（'input.in'）.val（）；
numOut=$（'input.out'）.val（）；
总计=numIn numOut；
$（'span'）.remove（）；
$（'body'）。追加（'£；'+总计+'）；
$（'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">

---

您可以循环查看

.in

和

.out

字段，并在执行时添加它们的值

示例：

var numIn=0；
var numOut=0；
总风险价值；
$（“#提交”）。单击（函数（）{
$（'input.in'）。每个（函数（）{
返回numIn+=（parseFloat（this.value）| | 0）；
});
$（'input.out'）.map（函数（）{
返回numOut+=（parseFloat（this.value）| | 0）；
});
总计=numIn-numOut；
$（'span'）.remove（）；
$（'body'）。追加（'£；'+总计+'）；
$（'span'）.fadeIn（250）；
返回false；
});​

---

EDIT:改为使用

parseFloat（）

而不是

parseInt（）

实际上，进一步测试后，唯一的问题是，如果一个或多个字段是empy，则返回“NaN”

我尝试添加条件语句来检查字段是否有值，但没有成功： 请随意编辑我的示例：

$（“#提交”）。单击（函数（）{
var numIn=0；
var numOut=0；
var合计=0；
$（'input.in'）。每个（函数（）{
if（$（this）.val（）.length！==0）{
返回numIn=numIn+parseInt（this.value）；
});
});
$（'input.out'）.map（函数（）{
if（$（this）.val（）.length！==0）{
返回numOut=numOut+parseInt（this.value）；
});
});
总计=numIn numOut；
$（'span'）.remove（）；
$（'body'）。追加（'£；'+总计+'）；
$（'span'）.fadeIn（250）；
返回false；
});

---

}))

检查从$（'input.in'）->中得到的是第一个输入吗？它是该类所有元素的数组吗？谢谢，这非常有效。我只需要在click函数中声明变量，以便在重新提交表单时重置它们。很抱歉成为jquery和stackoverflow n00b（我很确定回答你自己的问题并不是你想在线程中添加另一个示例）@David-刚刚看到你的评论。是的，看起来你用了我原来的答案。我进行了更新以避免空字段问题，并使用了

parseFloat（）

。很抱歉。你是对的，最好发表评论，或者在问题中添加更多信息：o）

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;
});​

$('#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;
});