javascript - 如何通过动态输入在 jQuery 中查找百分比

Question

我想找到折扣金额或百分比，两者都可以正常工作，但我无法对其进行一点调整

我希望如果我输入 0 的 10% 或 null，则总数应显示为 0。目前它将显示 10。
它还更新了第二次计算中的值，我只想在行上

  $(document).on('change', '.amountOrPercent', function() {
  var amountOrPercent = $(this).find(":selected").val();
  if (amountOrPercent == 'amount') {
    $(this).closest('.divForCalculation').find('.extraForPercentage').remove();
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '4px');
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '1');
  } else if (amountOrPercent == 'percentage') {
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '2');
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '0');
    $(this).closest('.divForCalculation').append('<div class="extraForPercentage" style="flex: 1"><span class="mr-2 px-3 pt-2">Of</span><div style="display: inline;"><input type="text" class="form-control totalof" placeholder="0" required style="display: inline; width: 60%;" value=""></div></div>');
  }
});


$(document).on("change keyup keypress", ".discountAmount, .totalof", function() {
  var discountAmount = 0;
  var discountPercentage = 0;
  var totalof=0;
  var result=0;
  discountAmount = $(".discountAmount").val();
  totalof=$(".totalof").val();
  if(totalof==null || totalof==0){
  totalof=0;
  result=-discountAmount;
  }
else
    {  
    result = -parseFloat((parseInt(totalof)/100*parseInt(discountAmount)));
}
    $('.invoiceItemAmount').val(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mr-2 divForCalculation" style="display: flex" >
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total<label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">

<hr>

<div class="mr-2 divForCalculation" style="display: flex" >
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total<label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">

---

**原始 HTML 结构**

<div class="inv-table-body">
  <div class="body-row row m-0">
    <div class="px-2 col-3">
      <select name="invoice_type" class="form-control invoiceType" required>
        <option value="newitem">New Item</option>
        <option value="presetitem">Preset Item</option>
        <option value="discount">Discount</option>
        <option value="subsidy">Subsidy</option>
      </select>
    </div>
    <div class="px-2 col-6 item-description" style="display: flex;">
      <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">
    </div>
    <div class="px-2 col-2">
      <input type="number" class="form-control invoiceItemAmount" name="amount[]" placeholder="0" value="" required>
    </div>
    <div class="col-1 del-icon-container"><i class="fas fa-trash"></i></div>
  </div>
</div>

追加

$(document).on('change', '.invoiceType', function() {
let $field = $(this);
let invoiceType = $field.val(); // :selected not needed

if (invoiceType === 'newitem') {
    $field.closest('.body-row').find('.item-description').html(`<input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">`);
} else if (invoiceType === 'presetitem') {
    $field.closest('.body-row').find('.item-description').html(`<input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">`);
} else if (invoiceType === 'discount') {
    $field.closest('.body-row').find('.item-description').html(`<div class="mr-2 divForCalculation" style="flex: 1">
        <div style="display: flex" class="calculation-container">
            <div class="mr-2" style="flex: 1">
                <div class="input-group my-group">
                    <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
                    <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
                        <option value="amount">$</option>
                        <option value="percentage">%</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 2">
    `);
} else if (invoiceType === 'subsidy') {
    $field.closest('.body-row').find('.item-description').html(`<div class="mr-2 divForCalculation" style="flex: 1">
        <div style="display: flex" class="calculation-container">
            <div class="mr-2" style="flex: 1">
                <div class="input-group my-group">
                    <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
                    <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
                        <option value="amount">$</option>
                        <option value="percentage">%</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 2">
    `);
}
});

Answer 1

您可以使用 .closest() 、nextAll() 和 :first 来定位您的输入并在那里更改值。此外，您可以根据此设置所需的值从选择框中获取所选值到您的输入框。

演示代码:

$(document).on('change', '.amountOrPercent', function() {
  var amountOrPercent = $(this).find(":selected").val();
  if (amountOrPercent == 'amount') {
    $(this).closest('.divForCalculation').find('.extraForPercentage').remove();
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '4px');
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '1');
  } else if (amountOrPercent == 'percentage') {
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '2');
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '0');
    $(this).closest('.divForCalculation').append('<div class="extraForPercentage" style="flex: 1"><span class="mr-2 px-3 pt-2">Of</span><div style="display: inline;"><input type="text" class="form-control totalof" placeholder="0" required style="display: inline; width: 60%;" value=""></div></div>');
  }
});


$(document).on("change keyup keypress", ".discountAmount, .totalof ,.amountOrPercent", function() {
  var selector = $(this).closest(".divForCalculation") //get closest div
  var discountAmount = 0;
  var discountPercentage = 0;
  var totalof = 0;
  var result = 0;
  discountAmount = selector.find(".discountAmount").val();
  totalof = selector.find(".totalof").val();
  //added cond if not visible
  if (totalof == null || totalof == 0 || !selector.find(".totalof").is(":visible")) {
    totalof = 0;
    //change value depending on select values
    result = selector.find(".amountOrPercent").val() == "amount" ? -discountAmount : 0;
  } else {
    result = -parseFloat((parseInt(totalof) / 100 * parseInt(discountAmount)));
  }
  //use nextAll..
  selector.nextAll('.invoiceItemAmount:first').val(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mr-2 divForCalculation" style="display: flex">
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total</label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">
<hr>

<div class="mr-2 divForCalculation" style="display: flex">
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total</label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">