实时计算JQuery

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添加到用户的输入时，逻辑看起来有点过于复杂。我将假设这是一项正在进行的工作，而且税率是可变的。