Question

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

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

Answer 1

您可以遍历.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()。

Answer 2

实际上经过进一步测试后，唯一的问题是，如果一个或多个字段为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;
});

}）;

从多个输入字段中减去值

2 个答案: