循环+在模糊上添加到数组

Question

我在理解如何做到这一点时遇到了一些困难。不管怎么说。

用户可以添加一堆输入字段。

我需要编写一个jQuery脚本，而不会明确地向HTML标记添加任何内容。

1. 查找类inputAmt
的所有元素
2. 如果用户模糊输入字段，jQuery脚本将触发。
3. 添加所有值以查找总数。
4. 如果用户减去需要反映总数的任何内容。

对我来说有点复杂，我会很感激能得到的所有帮助。

Answer 1

首先让我们获得inputAmt类的所有元素。

var elements = $('.inputAmt');

现在让我们创建一个添加其值的函数

function addElementValues(){
   var sum = 0;
   elements.each(function(){
      sum += parseFloat(this.value);
      // when this.value is empty or non numeric the parseFloat returns NaN (Not A Number)
      // so you might want to do sum += parseFloat(this.value) || 0;
      // to ignore the NaN values
   });
   // do something with the sum value here
   // like display it on some element
}

最后让我们在任何字段模糊时使用此功能

elements.on('blur', addElementValues);

---

完整的工作示例

＆＃13;

＆＃13;

var elements = $('.inputAmt');

function addElementValues() {
  var sum = 0;
  elements.each(function() {
    sum += parseFloat(this.value) || 0;
  });
  // do something with the sum value here
  // like display it on some element
  $('#total').text( sum );
}

elements.on('blur', addElementValues);

＆＃13;

.w70 {
  width: 70px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="txtr">
        <input type="text" class="inputAmt w70" name="something">
      </td>
      <td class="txtr">
        <input type="text" class="inputAmt w70" name="something1">
      </td>
      <td class="txtr">
        <input type="text" class="inputAmt w70" name="something2">
      </td>
      <td class="txtr">
        <input type="text" class="inputAmt w70" name="something3">
      </td>
      <td class="txtr">
        <input type="text" class="inputAmt w70" name="something4">
      </td>
    </tr>
  </tbody>
</table>
<div id="total"></div>

＆＃13;

＆＃13;

＆＃13;