如果某个输入为空，则更新计算结果

Question

我正在编写一个简单的页面，以根据选择的选项计算值。我在计算过程中遇到了一个问题，即结果不会立即出现，但我应该在输入中添加一个值（0 或其他内容然后删除它）以完成计算过程，这不是必需的如果用户有余额，则可选。也许我的细节还不够，但是有一个例子。

我想知道我的代码有什么问题。

$(document).ready(function(){
 
   var vat = 15;
   var price = 0;
   var price_vat = 0;
   $("#products").change(function(){
    pk_vat = vat;
    $("#products option:selected").each(function (){
     pk_vat *= parseFloat($(this).data('price'));
     price = parseInt($(this).data("price"));
     price_vat = parseInt($(this).data("price"));

     $("#cur_bal_b").on('input change keyup past', function(evt){
      var value = evt.target.value
      var current = parseFloat($(this).val());
      var remaining = price - current;
      var remaining_vat = ((price - current) * 14 / 100 );
      if (value.length === 0) {
       $("#rem_b").val(price);
       $("#vat_rem_b").val(pk_vat.toFixed(2));
       $("#tot_b").val((price + pk_vat).toFixed(2));
      } else {
       $("#rem_b").val(remaining);
       $("#vat_rem_b").val(remaining_vat.toFixed(2));
       $("#tot_b").val((remaining + remaining_vat).toFixed(2));
      }
      
     });

    });  
    pk_vat = pk_vat / 100;
    price_vat = price_vat + pk_vat;  

    $("#price_b").val(price);
    $("#price_vat_b").val(price_vat.toFixed(2));
   });
  });

table, td {border:1px solid #000;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Products Name</td>
    <td>Price</td>
    <td>Price &amp; VAT</td>
    <td>Current Balance</td>
    <td>Remaining</td>
    <td>VAT Remaining</td>
    <td>Total</td>
  </tr>
  <tr>
    <td>
<select id="products">
<option id="b_0" value="" data-price="0">Please Select</option>
<option id="b_1" value="s_140" data-price="10.00">product a</option>
<option id="b_2" value="s_250" data-price="20.00">product b</option>
<option id="b_3" value="s_600" data-price="30.00">product c</option>
<option id="b_4" value="m_140" data-price="40.00">product d</option>
<option id="b_5" value="m_250" data-price="50.00">product e</option>
<option id="b_6" value="u_140" data-price="60.00">product f</option>
<option id="b_7" value="u_250" data-price="70.00">product g</option>
<option id="b_8" value="u_600" data-price="80.00">product h</option>
</select>
</td>
<td><input name="Price_B" type="text" id="price_b" value="0" disabled="disabled" /></td>
<td><input name="Price_Vat_B" type="text" id="price_vat_b" value="0" disabled="disabled" /></td>
<td><input class="cur_bal" name="Current_Balance" type="text" id="cur_bal_b" placeholder="Current Balance&hellip;" autocomplete="off" pattern="^[0-9]\d*$" /></td>
<td><input name="Remaining" type="text" id="rem_b" value="0" disabled="disabled" /></td>
<td><input name="Vat_Remaining" type="text" id="vat_rem_b" value="0" disabled="disabled" /></td>
<td style="width:100px;"><input name="Total_b" type="text" id="tot_b" value="0" disabled="disabled" /></td>
  </tr>
</table>

Answer 1

您目前在输入字段的事件处理程序中进行计算。在有人对输入进行操作之前，它不会触发。

不要在事件处理程序中定义计算，而是创建一个单独的函数来计算结果。然后您可以从 select 的更改处理程序以及输入的处理程序调用此函数。当 select 改变，或访问输入时，数字将通过此函数更新。

（另一方面，您似乎在 select 的处理程序中定义了输入处理程序。这意味着每次 select 更改时，都会将另一个处理程序添加到那个输入。我建议将输入处理程序放在 select 处理程序旁边，而不是在它里面。）

如果某个输入为空，则更新计算结果

Update calculation result if certain input is empty

javascript

jquery

calculation