Question

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

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

使用案例

用户选择商品名称ABC，属性并输入数量字段100
在第二个＆＃34;形式＆＃34; （div容器），选择ABC，选择其他属性并输入数量50
在第三个＆＃34;形式＆＃34; （div容器）选择PQR，属性，输入数量430
在第4＆＃34;形式＆＃34; （div容器）选择PQR，选择属性，输入数量150

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

到目前为止我做了什么：

＆＃13;

$('.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>');
  }

}

＆＃13;

<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>

＆＃13;

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

任何帮助都将不胜感激。

Answer 1

您可以将sum创建为具有与项目名称相同的属性的对象，然后为每个项目名称添加相关的总和。

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

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

＆＃13;

$('.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>');
  }
}

＆＃13;

<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>

＆＃13;

根据所选项目计算总和

1 个答案: