计算不同事件数量的更好方法是什么？

Question

我已经解决了，这是我的 HTML 代码

<strong>Product Price = </strong><br>
<strong>Bag Price = </strong><br>
<hr>
<label>Quantity of products</label>
<br>
<input type="number" id="quantity">
<br>
<input type="checkbox" id="with_bag">
<label>With a bag</label>
<br>
<p>Total Price </p>
<input type="text" id="total_price" readonly>

这是我的 jQuery 代码

// Calculate total price (On Keyup)
$(document).on("keyup", "#quantity", function() {
  var quantity = $('#quantity').val();
  var content_price = $("#with_bag").is(':checked') ? 10 : 0;
  var total_price = (20 * quantity) + content_price;
  $('#total_price').val('$' + total_price.toFixed(2));
});

// Calculate total price (On Click)
$(document).on('click', '#with_bag', function(){
  var quantity = $('#quantity').val();
  var total_price = 20 * quantity;
  if(this.checked){
    total_price = (20 * quantity) + 10;
  }
  $('#total_price').val('$' + total_price.toFixed(2));
});

我只是想知道，如何在同一个函数中获取这两个不同的事件（在键入和单击时）？

Answer 1

如果这正是您想要的，您可以创建一个函数并有条件地跟踪您的事件。

function myFunction(event){
  var quantity = $('#quantity').val();
  if(event.type == "keyup"){
      var content_price = $("#with_bag").is(':checked') ? 10 : 0;
      var total_price = (20 * quantity) + content_price;
      $('#total_price').val('$' + total_price.toFixed(2));
  }
  else{
      var total_price = 20 * quantity;
      if($('#with_bag').is(":checked")){
        total_price = (20 * quantity) + 10;
      }
      $('#total_price').val('$' + total_price.toFixed(2));
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>Product Price = </strong><br>
<strong>Bag Price = </strong><br>
<hr>
<label>Quantity of products</label>
<br>
<input type="number" onkeyup="myFunction(event);" id="quantity">
<br>
<input type="checkbox" onclick="myFunction(event);" id="with_bag">
<label>With a bag</label>
<br>
<p>Total Price </p>
<input type="text" id="total_price" readonly>

计算不同事件数量的更好方法是什么？

What is the better way to counting number on different event?

javascript

jquery