Question

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

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

有些都装饰着“改变处理”这个类。

我需要做的是，使用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中：

＆＃13;

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;
});

＆＃13;

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

＆＃13;

Answer 2

以下是总结价值的方法：

var total = 0;
$(".change-handled").each(function(index, box) {
    total += parseInt($(box).val(), 10);
});

然后，您将使用jQuery在元素上提供的text或html函数来显示它们。

这可以在代码中的任何位置使用，包括事件处理程序。

Answer 3

我认为您正在寻找的是模糊事件。

＆＃13;

$('body').on('blur', 'input.change-handled', UpdateTotal);

function UpdateTotal() {
    var total = 0;
    var $changeInputs = $('input.change-handled');
    $changeInputs.each(function(idx, el) {
      total += Number($(el).val());
      });
  
  $('.total').text(total);
}

＆＃13;

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

＆＃13;

总结具有特定类名的所有文本框？

3 个答案: