Question

我有3个输入字段。＃first，＃second和#third，以及第四个字段#theResult。

<div id="addFields">
<span id="addFieldsHeader">Add The Fields</span>
<table style="margin:0 auto;">
    <tr>
    <td style="width:80px;">First
        <input id="first" size="5" value="3" name="first" style="width:75px" />
    </td>
    <td style="width:80px;">Second
        <input id="second" size="5" value="5" name="second" style="width:75px" />
    </td>
    <td style="width:80px;">Third
        <input id="third" size="6" maxlength="7" name="third" style="width:75px" value="0" />
    </td>
    <td style="width:80px;">Result
        <input id="theResult" size="7" maxlength="7" name="result" style="width:75px" value="0" />
    </td>
    </tr>
</table>
</div>

我尝试编写一个jQuery脚本，将＃first，＃second和#third的值一起添加到#theResult中显示结果。

我确实找到了.change（）函数here的文档，看起来它比.blur（）或.keyup（）更适合我的需要，因为我希望#theResult的值更新每个时间#first，＃second或#third的值被用户更改。

我有以下jQuery：

$(document).ready(function () {

    var first = parseInt($("#first").val(), 10);
    var second = parseInt($("#second").val(), 10);
    var third = parseInt($("#third").val(), 10);
    var theResult = first + second + third;

    $("#addFields input").change(function () {
        $("#theResult").val(theResult);
    });
});

当我在任何输入#theResult更新时更改一个值，但它只能工作一次，然后我必须重新加载页面才能使其工作。此外，仅添加初始值，而不是更新的值。小提琴是here

任何有经验的人都非常感谢您的帮助：）

Answer 1

$(document).ready(function() {
    $("#addFields input").change(function() {
        var first = parseInt($("#first").val(),10);
        var second = parseInt($("#second").val(),10);
        var third = parseInt($("#third").val(),10);
        var theResult = first + second + third;
        $("#theResult").val(theResult);
    });
});

您只需要在change()函数中移动变量，每次都会更新。

JSFiddle

Answer 2

您只需要在变更函数中为您带来变量

$("#addFields input" ).change(function() {

    var first = parseInt($("#first").val(),10);
    var second = parseInt($("#second").val(),10);
    var third = parseInt($("#third").val(),10);
    var theResult = first + second + third;
    $("#theResult").val(theResult);
});

因为新值没有分配给那些变量

Answer 3

试试这样：

$(function() {

     $("#addFields input" ).change(function() {
     var first = parseInt($("#first").val(),10);
     var second = parseInt($("#second").val(),10);
     var third = parseInt($("#third").val(),10);
     var theResult = first + second + third;
     $("#theResult").val(theResult);
});
});

Jquery .change（）只更新一次结果

3 个答案: