javascript - 从每个类获取两个输入数据，在内部相互相乘，将每个数据相加并显示在 div 中

Question

我想做的是从每个子 block 类中获取“a”和“b”输入数据，然后将它们相乘。从每个子 block 类获取数据，将它们添加到一起并在“showTotal”id 中显示。

这是 html

<div id="mainblock">
<form>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
    <div class="subBlock">
        <input class="a" name="a[]"  />
        <input class="b" name="b[]"  />
    </div>
</form>
</div>
<div id="showTotal"></div>

这里是 javascript/jquery 代码:

   $(document).on("change", ".subBlock input", function(){
        var totalFinal;
        var subTotal;
        // that = $(this);
        $('#mainblock').find('.subBlock').each(function() {
            subTotal = $(this).find('.a').val() * $(this).find('.b').val();
            totalFinal = totalFinal + subTotal;
        });
        $('#showTotal').html(totalFinal);
   });

我知道我在每个 $(this) 中都做错了，有什么建议，我该如何修复它。我搜索并尝试了其他帖子中的一些代码，但每次都失败。

Answer 1

1. 您需要将 totalFinal 变量初始化为零。否则，默认情况下它的值为 undefined，并且您将得到 NaN 结果。
2. 您可以使用|| 0 设置 subTotal 变量的值，当文本框中的值不是有效数字时，将值设置为零。

$(document).on("input", ".subBlock input", function() {
  var totalFinal = 0,
    subTotal;

  $('#mainblock').find('.subBlock').each(function() {
    subTotal = $(this).find('.a').val() * $(this).find('.b').val() || 0;
    totalFinal = totalFinal + subTotal;
  });

  $('#showTotal').html(totalFinal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="mainblock">
  <form>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
    <div class="subBlock">
      <input class="a" name="a[]" />
      <input class="b" name="b[]" />
    </div>
  </form>
</div>
<div id="showTotal"></div>