从多个输入字段中减去值

我正在使用以下代码来获取一个字段的值，从另一个字段的值中减去它并显示结果。从多个输入字段中减去值

$(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

从多个输入字段中减去值

回答

相关问题