Question

我正在尝试构建一个表单，如果您更新任何输入，它将更新总和。现在只有第一个输入正在工作。我希望在所有输入中使用单个类，因为页面是动态的，ID可以经常更改。

这是jsfiddle：

以下是代码：

var productCost = function (input, output, changeOn) {
  var reloadCalcs = function () {
    var sum = 0;
    $(input).each(function() {     
      sum += parseFloat($(input).val());    
    }); 
    $(output).html(sum);
  };
  $(function () {
    $(changeOn).change(function () {
      reloadCalcs();
    });
    $(changeOn).trigger('change');             
  });
};

productCost('.product','.sum','input');

Answer 1

使用

sum += parseFloat($(input).val());

您告诉总和将.product的值添加到自身，因为.product选择器将包含多个元素，它将选择第一个元素。
要解决此问题，您应该使用this：

sum += parseFloat($(this).val());

Answer 2

2次更改

var productCost = function(input, output, changeOn) {
  var reloadCalcs = function() {
    var sum = 0;
    $(input).each(function() {
      //use the value of current element
      sum += (+this.value || 0)
    });
    $(output).html(sum);
  };
  //use event delegation to support dynamic elements
  $(document).on('change', changeOn, function() {
    reloadCalcs();
  }).trigger('change');
};

productCost('.product', '.sum', 'input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" class="product" id="design" value="5" />
<br>
<input type="number" class="product" id="features" value="5" />
<br>
<input type="number" class="product" id="performance" value="5" />
<br>
<input type="number" class="product" id="usability" value="5" />
<br>
<h3>TEST</h3>
<div class="sum"></div>

使用$(input).val()时，它将始终返回第一个输入元素的值，而不是返回循环中当前输入的值

jQuery - 更新仅适用于许多字段之一

2 个答案: