如何使用jquery计算输入的总价格

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<span id="totalPrice"></span>

<input type="text" class="price-input" data-price="10">
<input type="text" class="price-input" data-price="20">
<input type="text" class="price-input" data-price="30">

$(document).ready(function() {
  $('.price-input').on('input', function() {
    var totalPrice = 0;
    $('.price-input').each(function() {
      var price = parseFloat($(this).data('price'));
      var quantity = parseFloat($(this).val());
      if (!isNaN(price) && !isNaN(quantity)) {
        totalPrice += price * quantity;
      }
    });
    $('#totalPrice').text(totalPrice.toFixed(2)); // 将总价格保留两位小数并更新到显示元素中
  });
});