javascript - 汇总具有特定类名的所有文本框？

Question

我有一个网格，其中一列包含一个文本框，用户可以在其中输入美元金额。文本框声明为:

<input class="change-handled" sub-category-id="83" data-id="" style="text-align: right; width: 100%" type="number" value="">

有些都装饰有“change-handled”类。

我需要做的是，使用 javascript/jquery，汇总所有使用该类的框，并在屏幕的其他位置显示总数。

我怎样才能有一个全局事件，当我退出其中一个框(即:Tab out 或 ENTER out)时允许发生这种情况。

目前，我有一个暂时没有做太多事情的事件，它将被使用:

$('body').on('change', 'input.change-handled', SaveData);

function SaveData() {
    var dataId = $(this).attr('data-id');
    var categoryId = $(this).attr('sub-category-id');
    var value = $(this).val();

}

我如何使用 SaveData 事件找到所有具有“更改处理”类的编辑框，汇总它们的值，并将其显示在某处？

Answer 1

在纯 JavaScript 中:

var changeHandled = [].slice.call(document.querySelectorAll('.change-handled'));
var total = document.querySelector('.total');

function calc() {
    total.textContent = changeHandled.reduce(function(total, el) { 
      return total += Number(el.value);
    }, 0);
}
  
changeHandled.forEach(function(el) {
   el.onblur = calc;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="change-handled">
<input type="number" class="change-handled">
<input type="number" class="change-handled">

Total: $<span class="total">0</span>