从每个类中获取两个输入数据，彼此内部相互比较，将每个输入数据相加并在div中显示

Question

我想做的是从每个subBlock类中获取“ a”和“ b”输入数据，并将它们相乘。 从每个subBlock类获取数据，将其全部添加并显示在“ 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的值不是有效数字， subTotal变量的值设置为|| 0即可将其设置为零。

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

Answer 2

您应该首先初始化变量

var totalFinal = 0;
var subTotal = 0;