EXAMPLE

Question

我有一个表格，我试图在keydown或blur上使用jQuery添加和减去多个文本字段。虽然我可以成功添加，但我得到了减法的所有错误结果。

HTML：

<input type="text" class="add" />
<input type="text" class="add" />
<input type="text" class="sub" />
<input type="text" class="sub" />
<label id="total"></label>

JS：

 $('.add').blur(function () {
     var sum = 0;
     $('.add').each(function () {
         if (!isNaN(this.value) && this.value.length != 0) {
             sum += parseFloat(this.value);
         }
     });

     $('#total').text(sum.toFixed(2));

 });

 $('.sub').blur(function () {
     var sum = 0;
     var val = $('#total').text();
     $('.sub').each(function () {
         if (!isNaN(this.value) && this.value.length != 0) {
             sum -= parseFloat(this.value);

         }
     });
     val = parseFloat(sum) - parseFloat(val);
     $('#total').text(val);

 });

FIDDLE

Answer 1

我建议下一个解决方案：

<强> HTML：

<input type="text" class="calc" data-action="add" />
<input type="text" class="calc" data-action="add" />
<input type="text" class="calc" data-action="sub" />
<input type="text" class="calc" data-action="sub" />
<label id="total"></label>

<强> JS ：

$(document.body).on('blur', '.calc', function() {
    var result = 0;
    $('.calc').each(function() {
        var $input = $(this),
            value = parseFloat($input.val());

        if (isNaN(value)) {
            return;
        }

        var action = $input.data('action') == 'add' ? 1 : -1;

        result += value * action;
    });

    $('#total').text(result.toFixed(2));
});

Try it

Answer 2

变化：

val =  parseFloat(sum) - parseFloat(val);

为：

val =  parseFloat(val) + parseFloat(sum);

在.sub处理程序中，sum为否定，因此您需要将其添加到val才能减去。

FIDDLE

Answer 3

根据您的小提琴，您可以简单地执行以下操作：

$(function() {
    $(document).on('blur change keyup', '.add, .sub', function(e) {
        var sum = 0;
        $('.add, .sub').each(function(i) {
            if (!isNaN(this.value) && this.value.length != 0) {
                if ($(this).hasClass('add')) {
                    sum += parseFloat(this.value);
                }
                else {
                    sum -= parseFloat(this.value);
                }
            }
        });
        $('#total').text(sum.toFixed(2));
    })
})

EXAMPLE

FuN vERsiON!¡!

Answer 4

这是怎么回事：

http://jsfiddle.net/fYSgn/

我结合了两个模糊功能

function parseOrZero(val){
    return parseFloat(val) || 0;
}
$('.add, .sub').blur(function () {
    var total = 0;
    for(i =0, as = $(".add, .sub"), asl = as.size(); i < asl; i++){
        if(i < 2){
            total += parseOrZero(as.eq(i).val());
        }else{
            total -= parseOrZero(as.eq(i).val());
        }
    }     
    $('#total').text(total);
});

Answer 5

最短版本的jquery做你想做的......真的很鼓舞人心。

http://jsfiddle.net/techsin/QHgdZ/5/

var total, f=$('#total'), s=$('.calc');
s.blur(function(){
    var t=$(this),total=0;
    t.data('i',t.val()*((t.data('action')=='sub')?-1:1));
    s.each(function(){total+=~~$(this).data('i');});
    f.text(total);});

是的，这是所有代码......

Answer 6

<html>
<head>
<script language="javascript">
function Sum()
{
var num1,num2,res;
num1=document.getElementById("txtnum1").value;
num2=document.getElementById("txtnum2").value;
res=parseInt(num1)+parseInt(num2);
document.getElementById("txtres").value=res;
}

function Subtract()
{
var num1,num2,res;
num1=document.getElementById("txtnum1").value;
num2=document.getElementById("txtnum2").value;
res=num1-num2;
document.getElementById("txtres").value=res;
}



</script>
</head>
<body>
<table align="center">
<tr>
<td>Num1</td>
<td><input id="txtnum1" onChange="Sum()" /></td>
</tr>
<tr>
<td>Num2</td>
<td><input id="txtnum2" onChange="Sum()"  /></td>
</tr>
<tr>
<td>Result</td>
<td><input id="txtres" /></td>
</tr>

</table>
</body>
<html>

加法和减法多个文本字段

6 个答案:

EXAMPLE

FuN vERsiON!¡!