jquery - 如何找到总折扣 - jQuery

Question

我正在尝试输出总的独家折扣。例如，如果有两种产品，每种产品的成本都是 1000 和 10% 的折扣。那么总独占将是 200。但我的代码显示只有 1 个产品的折扣

这是jQuery代码

$(document).on('keyup', '#invoice_item_price, #invoice_item_quantity, #invoice_item_discount', function() {

  var sum = 0;
  
  $('.invoice-table > tbody > tr').each(function() {
    var price = $(this).find('#invoice_item_price').val();
    var quantity = $(this).find('#invoice_item_quantity').val();
    var discount = $(this).find('#invoice_item_discount').val();
    var tax = $(this).find('#invoice_item_tax').val();
    var total = (quantity * price);

    if (discount) {
      var dec = (discount / 100).toFixed(2);
      var mult = total * dec;
      $("#invoice_total_discount").text(mult);
      total = total - mult;
    }

    $(this).find('#invoice_item_total_amount').val(total);
    sum += total;
  });

  $('#invoice_subtotal').text(sum);
  $('#invoice_total_amount').text(sum);

});

$("#invoice_total_discount").text(mult); 这将在 span 标签中输出折扣，但它仅显示 1 个产品的折扣。我正在尝试显示所有产品的总独家折扣

标签： jquery

Answer 1

就像评论中提到的那样：ID 必须是唯一的，因此您应该将它们更改为类。要获得总折扣，您只需在脚本中添加另一个变量（例如disc），这样sum就可以计算每一行的计算折扣。

由于tax在此示例中未使用，因此我将其删除。而且因为invoice_subtotal显示相同，所以invoice_total_amount我将其替换invoice_total_discount为总折扣。

$(document).on('keyup', '.invoice_item_price, .invoice_item_quantity, .invoice_item_discount', function() {

  var sum = 0;
  var disc = 0;
  
  $('.invoice-table > tbody > tr').each(function() {
    var price = $(this).find('.invoice_item_price').val();
    var quantity = $(this).find('.invoice_item_quantity').val();
    var discount = $(this).find('.invoice_item_discount').val();
    var total = quantity * price;

    if (discount) {
      var dec = (discount / 100).toFixed(2);
      var mult = total * dec;
      disc += mult;
      total = total - mult;
    }

    $(this).find('.invoice_item_total_amount').val(total);
    sum += total;
  });

  $('#invoice_total_amount').text(sum);
  $("#invoice_total_discount").text(disc);

});

input {
  width: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="invoice-table">
  <thead>
    <tr>
      <th>Price</th>
      <th>Quantity</th>
      <th>Discount</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="invoice_item_price"></td>
      <td><input class="invoice_item_quantity"></td>
      <td><input class="invoice_item_discount"></td>
      <td><input class="invoice_item_total_amount" readonly></td>
    </tr>
    <tr>
      <td><input class="invoice_item_price"></td>
      <td><input class="invoice_item_quantity"></td>
      <td><input class="invoice_item_discount"></td>
      <td><input class="invoice_item_total_amount" readonly></td>
    </tr>
  </tbody>
</table>

<div>Total amount: <span id="invoice_total_amount"></span></div>
<div>Total discount: <span id="invoice_total_discount"></span></div>