Question

我正在尝试执行实时计算，但对我而言不起作用。我避免使用id选择器将相同的代码应用于多种表单

function OgKeyPress() {
  var amount = $(this);
  var s = amount.value;
  var tax = $(this).closest("table").find("tr td div").first().find("p input");
  var total = $(this).closest("table").find("tr td div").last().find("p input");

  var t = tax.value = (1 / 10).toFixed(1);
  total.value = Number(s) + Number(t);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <div>
      <input type="text" onKeyPress="OgKeyPress()" onKeyUp="OgKeyPress()" name="amount">
    </div>
    <tr>
      <td>
        <div>
          <b>tax</b>
          <p>
            <input name="tax" type="text" readonly="readonly">
          </p>
        </div>
        <div>
          <b>total</b>
          <p>
            <input name="sum" type="text" readonly="readonly">
          </p>
        </div>
      </td>
    </tr>
  </table>
</form>

Answer 1

您在这里遇到了几个问题。首先，主要问题是因为您的HTML无效；您不能将div作为table的子代。它必须在tr和td或th之内。这就是closest()无法正常工作的原因，因为渲染器正在将div的外部移到表格的外部以使HTML有效。

您还声明不想使用id属性，因为会重复此HTLM结构，这很好，请改为使用class属性。然后，您可以为所有这些元素组合相同的功能，而不必重复您的JS。

您也不应该使用on*内联事件处理程序。除了大量过时之外，它们不保留引发元素的元素范围，因此this引用很可能是window，从而导致计算逻辑出现问题。要解决此问题，请使用不引人注目的事件处理程序，例如jQuery的on()和input事件，该事件处理程序还涉及使用鼠标粘贴内容。

话虽如此，请尝试以下操作：

$(function() {
  $('.amount').on('input', function() {
    var $amount = $(this);
    var $table = $amount.closest('table');
    var $tax = $table.find(".tax");
    var $total = $table.find(".total");

    var tax = parseFloat((1 / 10).toFixed(1));
    $tax.val(tax);
    $total.val(parseFloat($amount.val()) + tax);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td>
        <input type="text" name="amount" class="amount">
      </td>
    </tr>
    <tr>
      <td>
        <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="total" readonly="readonly">
          </p>
        </div>
      </td>
    </tr>
  </table>
</form>

最后一点要注意，tax计算被硬编码为0.1，因此当您只需向用户输入中添加0.1时，逻辑似乎有点复杂。我将假定这是一个正在进行的工作，而且税率是可变的。

实时计算JQuery

1 个答案: