1

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

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

用例：

  • 用户选择项目名称ABC、属性并在数量字段中输入100
  • 在第二个“表单”（div 容器）中，选择ABC，选择其他属性并输入数量50
  • 在第三个“表单”（div 容器）中选择PQR，属性，输入数量430
  • 第4个“form”（div容器）中选择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>

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

任何帮助，将不胜感激。

4

1 回答 1

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>

于 2018-02-12T19:40:25.400 回答