Jquery .change()只更新结果一次

Jquery .change() only updates results one time

本文关键字：一次 结果 change Jquery 更新      更新时间：2023-09-26

我有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()函数的文档，看起来它比。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确实更新，但它只工作一次，之后我必须重新加载页面才能使其工作。此外，只添加初始值，而不添加更新后的值。小提琴在这里

任何有经验的人我都非常感谢你的帮助:)

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

您只需要在更改函数中引入变量

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

因为新值没有赋给这些变量

试试这样:

$(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);
});
});
相关文章：