Question

我正在尝试执行实时计算，但对我而言不起作用。我避免使用id选择器在多个表单上应用相同的代码。如果if语句的代码仅对某些数字有效，则在下面。

$(function() {
 $('.amount').on('input', function() {
  var $amount = $(this);
  var $form = $amount.closest('form');
  var $tax = $form.find(".tax");
  var $sum = $form.find(".sum");
  var s = $amount.val();
if ( s < 100  ) {
   var tax = parseFloat((1 / 10).toFixed(1));
} else if ( s >= 100 && s <= 1000) {
    var tax = Number(s) * (0.5/100);
    var tax = tax.toFixed(1);
} else {
        var tax = tax.value = (10);
}
$tax.val(tax);
$sum.val(parseFloat(Number(s)) + Number(tax));
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
        <input type="text" name="amount" class="amount">
        <div>
          <b>tax</b>
          <p>
            <input name="tax" type="text" class="tax" readonly="readonly">
          </p>
        </div>
        <div>
          <b>total</b>
          <p>
            <input name="sum" type="text" class="sum" readonly="readonly">
          </p>
</form>

Answer 1

您遇到的问题是else，金额为> 1000。在未定义tax值的情况下，您正在使用它，因此在此行上会出现错误：

var tax = tax.value = (10);

tax也是一个整数（或您在其上调用toFixed()的字符串），永远不会具有value属性。

要解决此问题，请先定义tax变量，然后在所有if条件下对其进行修改：

$(function() {
  $('.amount').on('input', function() {
    var $amount = $(this);
    var amount = $amount.val()
    var $form = $amount.closest('form');
    var $tax = $form.find(".tax");
    var tax = 0;
    var $sum = $form.find(".sum");
    
    if (amount < 100) {
      tax = (1 / 10).toFixed(1);
    } else if (amount <= 1000) {
      tax = (Number(amount) * (0.5 / 100)).toFixed(1);
    } else {
      tax = 10;
    }
    
    $tax.val(tax);
    $sum.val(parseFloat(amount) + parseFloat(tax));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" name="amount" class="amount">
  <div>
    <b>tax</b>
    <p>
      <input name="tax" type="text" class="tax" readonly="readonly">
    </p>
  </div>
  <div>
    <b>total</b>
    <p>
      <input name="sum" type="text" class="sum" readonly="readonly">
    </p>
</form>

还请注意，>= 100中不需要else检查，并且我将s更改为amount。始终使用有意义的变量名。

带有IF语句的实时计算JQuery

1 个答案: