jquery - 使用 jQuery 将具有相同类的输入值一起计算

Question

我需要编写一个脚本来计算工作时间。我有一张表，其中包含 6 个可能的小时数，需要在底部的字段中添加在一起。

HTML 如下所示：

<table>
 <tr>
  <td><input type="text" name="amount[]" class="countAmount"></td>
  <td>(...)</td>
 </tr>
 <tr>
  <td><input type="text" name="amount[]" class="countAmount"></td>
  <td>(...)</td>
 </tr>
 <tr>
  <td><input type="text" name="amount[]" class="countAmount"></td>
  <td>(...)</td>
 </tr>
 <tr>
  <td>Total: <span id="total"></span></td>
 </tr>
</table>

我正在尝试将类的值countAmount一起计算。

我不知道从哪里开始 jQuery 代码。我尝试的一切都是无用的，但主要问题是如何处理空值以及如何将值作为 INT 处理。

Answer 1

要查找输入：

var inputs = $('input.countAmount');

要转换为数字并处理空格：

var num = parseInt($(input).val(), 10);
if (!isNaN(num)) {
    // It's a valid number, not blank, not "a" or "q", etc.
}

要遍历它们，请使用each.

所以：

var total = 0;
$('input.classAmount').each(function() {
    var num = parseInt(this.value, 10);
    if (!isNaN(num)) {
        total += num;
    }
});

...因为在循环中，this将是input，并且要获取输入的值，您不需要 jQuery，该value属性很好。

然后把它放在你的total跨度中：

$("#total").text(String(total));