根据所选项目计算总和

Question

我有一个表单，用户必须在其中 select 项目名称、项目属性并输入项目数量。如果用户需要更多项目，则会克隆一个新表单。

我想计算特定项目名称的所有数量的总和。

用例：

用户选择项目名称ABC、属性并在数量字段中输入100
第二个"form"（div容器），selects ABC，selects其他属性和输入数量50
第三个"form"(div容器)selectsPQR,属性,输入数量430
第4个"form"（div容器）selects PQR，选择属性，输入数量150

我需要添加所有 PQR 和 ABC 的总和，并在各自的输入字段中显示值。

到目前为止我做了什么：

$('.quantity-input').on('blur', function() {
  getTotalQuantity();
});


function getTotalQuantity() {
  var $qr = $('.quantity-input');
  var sum = 0;
  var item_name;

  $qr.each(function(i, obj) {
    var self = $(this);
    item_name = self.closest(".abc-form").find('.select-item-name').val();
    item_name = item_name.replace(/\s/g, '').toLowerCase();

    console.log(item_name);
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });

  var input_item_name = $('input[data-item-name="' + item_name + '" ]');

  if (input_item_name.length) {
    input_item_name.val(sum);

  } else {
    $('.add-item-quantity').append('<p><input type="text" value="' + sum + '" class="' + item_name + '" data-item-name="' + item_name + '"/></p>');
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>

<div class="add-item-quantity">
</div>

虽然此代码计算总和，但它计算所有 selected 项的总和并显示在一个输入字段中。我想根据项目名称 selected 计算输入总和，每个 selected 项目名称的数量应该在不同的输入字段中显示总和。例如 (ABC 的总和将显示在一个输入字段中，而 PQR 的总和将显示在另一输入字段中。

如有任何帮助，我们将不胜感激。

Answer 1

您可以创建 sum 作为属性等于项目名称的对象，然后添加每个项目名称的相关总和。

我还会在您每次更新输出时销毁它，因为某些项目名称可能会从选择中删除，然后您需要从输出中明确删除这些名称。从头开始比较容易。

同时确保您响应项目名称选择的更改以更新输出：

$('.quantity-input,.select-item-name').on('change', function() {
  getTotalQuantity();
});


function getTotalQuantity() {
  var $qr = $('.quantity-input');
  var sum = {};
  var item_name;

  $qr.each(function(i, obj) {
    var self = $(this);
    item_name = self.closest(".abc-form").find('.select-item-name').val();
    item_name = item_name.replace(/\s/g, '').toLowerCase();

    if (!isNaN(this.value) && this.value.length != 0) {
      sum[item_name] = (sum[item_name] || 0) + parseFloat(this.value);
    }

  });
  
  $('.add-item-quantity').empty();
  for (item_name in sum) {
      $('.add-item-quantity').append('<p>' + item_name + ':' + 
            '<input type="text" value="' + sum[item_name] + '" class="' + item_name + '" data-item-name="' + item_name + '"/></p>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<button class="calc">
  Calculate
</button>

<div class="add-item-quantity">
</div>

根据所选项目计算总和

Calculate sum based on selected item

jquery

jquery-calculation