如何在 jquery 中设置同步 onkeyup 功能

Question

Onkeyup 函数在 jquery 连续

我可以在 jquery 中先执行 onkeyup 函数，但我不知道如何使用 onkeyup 函数获得最终答案。请帮忙解决这个问题。在这里我的编码有人知道解决方案请帮助：我的 html 代码：

$("#quantity-1,#price-1").keyup(function () { $('#total-1').val($('#price-1').val() * $('#quantity-1').val()); });
$("#quantity-2,#price-2").keyup(function () { $('#total-2').val($('#price-2').val() * $('#quantity-2').val()); });
$("#quantity-3,#price-3").keyup(function () { $('#total-3').val($('#price-3').val() * $('#quantity-3').val()); });
$("#quantity-4,#price-4").keyup(function () { $('#total-4').val($('#price-4').val() * $('#quantity-4').val()); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td>amount 1:<input type="text" id="price-1" value="15" readonly=""></td><td>qunatity 1:<input type="text" id="quantity-1"></td><td> total 1:<input type="text" name"amt" class="total" id="total-1" readonly=""></td></tr>
<tr><td>amount 2:<input type="text" id="price-2" value="14" readonly=""></td><td>qunatity 2:<input type="text" id="quantity-2"></td><td> total 2:<input type="text" name"amt" id="total-2" class="total" readonly=""></td></tr>
<tr><td>amount 3:<input type="text" id="price-3" value="13" readonly=""></td><td>qunatity 3:<input type="text" id="quantity-3"></td><td> total 3:<input type="text" name"amt" id="total-3" class="total" readonly=""></td></tr>
<tr><td>amount 4:<input type="text" id="price-4" value="12" readonly=""></td><td>qunatity 4:<input type="text" id="quantity-4"></td><td> total 4:<input type="text" name"amt" id="total-4" class="total" readonly=""></td></tr>
<tr><td></td>                                               <td></td>                                             <td>All total:<input type="text" name"amt" id="totalvalue"></td></tr>
</table>

https://codepen.io/selvaa369/pen/MWoNwVB

Answer 1

我假设您正在尝试填写 'All total' 字段？如果是这样，您可以通过简化代码来实现它。

首先，删除您在行元素上添加的所有增量 id 属性，例如 #price-1 和 #quantity-1。将它们替换为常见的类。

从那里您可以使用 input 事件，因为当使用鼠标粘贴或添加内容时也会触发此事件，以使用 DOM 遍历检索行中的所有字段并计算全部的。这种方法的好处是相同的 HTML 块将适用于无限数量的行。

最后，您可以遍历所有 .total 元素以获得所有行的总和并将其放入 'All total' 字段。

综上所述，试试这个：

let calcRowTotal = $row => {
  let price = $row.find('.price').val() || 0;
  let quantity = $row.find('.quantity').val() || 0;
  $row.find('.total').val(price * quantity);
}

let calcTotal = () => {
  let total = 0;
  $('.total').each((i, el) => total += parseFloat(el.value || 0));
  $('#totalvalue').val(total);
}

$('.quantity, .price').on('input', e => {
  let $row = $(e.target).closest('tr');
  calcRowTotal($row);
  calcTotal();
});

input { width: 30px; } /* just to make this demo fit in snippet window */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <td>amount 1: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 1: <input type="text" class="quantity"></td>
    <td>total 1: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td>amount 2: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 2: <input type="text" class="quantity"></td>
    <td>total 2: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td>amount 3: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 3: <input type="text" class="quantity"></td>
    <td>total 3: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td>amount 4: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 4: <input type="text" class="quantity"></td>
    <td>total 4: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>All total: <input type="text" name "amt" id="totalvalue"></td>
  </tr>
</table>

如何在 jquery 中设置同步 onkeyup 功能

How to set simultanious onkeyup function in jquery

jquery

onkeyup