javascript - jquery 函数对具有 2 个类的文本框求和

Question

我正在尝试使用 jquery 添加一组文本框。每个文本框都有一个类 (class1) 以使用 Bootstrap 对其进行样式设置。我正在添加一个额外的类 (class2) 来运行 jquery 函数。下面是两个文本框外观的示例。

<input type="text" class="class1 class2" name="textbox1" id="textbox1 />
<input type="test" class="class1 class2" name="textbox2" id="textbox2 />

这是我的 jquery 函数。 GrandTotal 是保存总和的文本框的 id。

$('.class2').keyup(function () { 
  var sum = 0;

  $('.class2').each(function() {
    sum += Number($(this).val());
  });

  $('#GrandTotal').val(sum);

});

它不起作用。我在#GrandTotal 中没有结果。有人可以告诉我我做错了什么吗？预先感谢您的帮助。

cdr6800

Answer 1

您必须验证输入是数字，否则您将得到 NaN(不是数字)。 JavaScript 具有用于检查给定输入是否为 NaN 的 isNaN() 函数。

$('input.class2').keyup(function() {
  var sum = 0;

  $('input.class2').each(function() {
    var value = Number($(this).val());
    if(!isNaN(value)) {
        sum += value;
    }
  });

  $('#GrandTotal').val(sum);
});

查看实际效果:https://jsfiddle.net/ibrahimeymenduran/ymnu9hf4/