如何检测 jQuery 中文本输入框的变化

Question

我有两个文本输入文本框，我想对用户输入的任何内容进行总数。下面是我的代码：

$(document).ready(function(){

    var total = 0;

    $(".test").on("input", function(){

        // Print entered value in a div box

        total += parseInt($(this).val());

        $("#result").text(  total);

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>

    <p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>

    <div id="result"></div>

当我10先输入然后它需要11，然后如果我输入 100 然后它需要111，我不明白为什么会发生这种情况。我哪里出错了，请指导我？

Answer 1

在您的代码上，当您输入第一个数字时，由于您的代码，它已被计算为总数total += parseInt($(this).val())。例如，如果您按第一个数字为 1，那么当时的总数正在更新为total = total + 1等于 1，例如，在第二次按键时，取 0，则您的输入值变为 10。它正在计算当前的总值为total = total + 10。这就是为什么你得到 11 作为答案像这样尝试。$(document).ready(function(){$(".test").on("input", function(){&nbsp; &nbsp; let total = 0;&nbsp; &nbsp; $('.test').each(function() {&nbsp; &nbsp; &nbsp; if (!isNaN(parseInt($(this).val()))) {&nbsp; &nbsp; &nbsp; &nbsp; total += parseInt($(this).val());&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; $("#result").text(total);});});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p><input type="text" class="test" placeholder="Type something..." id="myInput1"></p><p><input type="text" class="test" placeholder="Type something..." id="myInput2"></p><div id="result"></div>

Answer 2

它没有向您显示您想要的结果的原因是因为计算错误。现在，每次输入字段更改时，您都将数字添加到总数中。因此，如果您键入 123，则需要 0 + 1 ，然后是 1 + 12，然后是 13 + 123，因此您将得到 136 作为结果。我为您的问题写了一个可能的解决方案。代码在下面的小提琴中。您可以添加一个函数来计算所有输入字段的总数（可能超过 2，它是通用的）。function calculateTotal(){&nbsp; var total = 0;&nbsp; &nbsp; $(".test").each(function( index ) {&nbsp; &nbsp; &nbsp; var value = $(this).val();&nbsp; &nbsp; &nbsp; if(value == ""){&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; total += parseInt(value);&nbsp; &nbsp; });&nbsp; $("#result").text(total);}并且在您的输入字段更改时，您只需执行该功能。$(document).ready(function(){&nbsp; &nbsp; $(".test").on("input", function(){&nbsp; &nbsp; &nbsp; &nbsp; calculateTotal();&nbsp; &nbsp; });});你的例子在这个小提琴中：https : //jsfiddle.net/xL6hgder/2/

Answer 3

您只需使用您尝试更改的输入值更新总计。要获得两个输入值的总数，您必须取两个值并将其与总数相加。试试下面的代码-$(document).ready(function() {&nbsp; $(".test").on("change", function() {&nbsp; &nbsp; var total = 0;&nbsp; &nbsp; $('.test').each(function() {&nbsp; &nbsp; &nbsp; if (!isNaN(parseInt($(this).val()))) {&nbsp; &nbsp; &nbsp; &nbsp; total += parseInt($(this).val());&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; // Print entered value in a div box&nbsp; &nbsp; $("#result").text(total);&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p><input type="text" class="test" placeholder="Type something..." id="myInput"></p><p><input type="text" class="test" placeholder="Type something..." id="myInput"></p><div id="result"></div>