如何检测 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(){

    let total = 0;

    $('.test').each(function() {

      if (!isNaN(parseInt($(this).val()))) {

        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="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(){

  var total = 0;

    $(".test").each(function( index ) {

      var value = $(this).val();

      if(value == ""){

        return;

      }

      total += parseInt(value);

    });

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

}

并且在您的输入字段更改时，您只需执行该功能。

$(document).ready(function(){

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

        calculateTotal();

    });

});

你的例子在这个小提琴中：https : //jsfiddle.net/xL6hgder/2/

Answer 3

您只需使用您尝试更改的输入值更新总计。

要获得两个输入值的总数，您必须取两个值并将其与总数相加。

试试下面的代码-

$(document).ready(function() {

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

    var total = 0;

    $('.test').each(function() {

      if (!isNaN(parseInt($(this).val()))) {

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

      }

    });

    // Print entered value in a div box

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