jquery - 更新输入和窗口加载时在多个位置更新文本

Question

当输入发生变化时，我设法更新了表单上的一些价格，但是在表单提交时有一些错误检查，所以之后我需要再次运行这些函数。任何帮助都将不胜感激，例如，如果您将输入中的一个数量从 1 更改为其他任何数量，如果要重新加载页面，这应该会更新其下方的价格和底部的价格。

HTML

<form action="" method="post">
  <h2>Products</h2>
  <div class="form-product">
    <div class="fields update-price">
      <div>
        <h3>Product 1</h3>
      </div>
      <div class="quantity update-quantity">
        <label for="utreat">Quantity</label>
        <input type="number" name="product1" id="product1" min="1" value="1" data-price="850">
        <p class="price">£<span>850.00</span></p>
      </div>
    </div>
  </div>
  <div class="form-product">
    <div class="fields update-price">
      <div>
        <h3>Product 2</h3>
      </div>
      <div class="quantity update-quantity">
        <label for="utreat">Quantity</label>
        <input type="number" name="product2" id="product2" min="1" value="1" data-price="110">
        <p class="price">£<span>110.00</span></p>
      </div>
    </div>
  </div>
  <div class="form-product">
    <div class="fields">
      <div>
        <h3>Cant change this product</h3>
      </div>
      <div class="quantity">
        <label for="pack">Quantity</label>
        <input type="text" name="pack" id="pack" min="1" max="1" value="1" disabled>
      </div>
    </div>
  </div>
  <h2>Price</h2>
  <p class="sub">Sub-Total: £<span>2064.50</span></p>
  <p>Shipping: £12.00</p>
  <p class="total">Total: £<span>2076.50</span></p>
</form>

jQuery

<script>
    $(function() {
        var shipping = 12;

        $('.update-quantity input').on('keyup mouseup', function() {
            updateQuantity(this);
        });

        function recalculateCart() {
            var subtotal = 0;
            $('.form-product .update-price').each(function() {
                subtotal += parseFloat($(this).children('.update-quantity').find('span').text());
            });

            var total = subtotal + shipping;
            $('.sub span').text(subtotal.toFixed(2));
            $('.total span').text(total.toFixed(2));
        }

        function updateQuantity(quantity) {
            var product = $(quantity).parent().parent();
            var price = parseFloat($(quantity).data('price'));
            var quantity = $(quantity).val();
            var linePrice = price * quantity;

            product.children('.update-quantity').each(function() {
                $(this).find('span').text(linePrice.toFixed(2));
                recalculateCart();
            });
        }
    });
</script>

小提琴在这里https://jsfiddle.net/40r1xby5/

标签： jquery

Answer 1

您可以只保留一个函数，并page在 get 加载时调用它，也可以在数量值 get 时调用它change。然后，只需循环遍历update-pricediv 然后设置新价格并在每次迭代时将小计添加到某个变量，最后为您的 Total 和 Subtotal 跨度设置新值。

演示代码：

$(function() {
  var shipping = 12;
  recalculateCart(); //call on page load
  $('.update-quantity input').on('keyup mouseup', function() {
    recalculateCart(); //call this
  });

  function recalculateCart() {
    var subtotal = 0;
    var price = 0;
    //loop through update price div
    $('.form-product .update-price').each(function() {
      price = parseFloat($(this).find("input").data('price') * $(this).find("input").val()) //calculate price
      $(this).find(".price span").text(price.toFixed(2)) //set price
      subtotal += parseFloat($(this).find("input").data('price') * $(this).find("input").val()) //add subtotl
    });
    var total = subtotal + shipping;
    $('.sub span').text(subtotal.toFixed(2));
    $('.total span').text(total.toFixed(2));
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  <h2>Products</h2>
  <div class="form-product">
    <div class="fields update-price">
      <div>
        <h3>Product 1</h3>
      </div>
      <div class="quantity update-quantity">
        <label for="utreat">Quantity</label>
        <input type="number" name="product1" id="product1" min="1" value="1" data-price="850">
        <p class="price">£<span>850.00</span></p>
      </div>
    </div>
  </div>
  <div class="form-product">
    <div class="fields update-price">
      <div>
        <h3>Product 2</h3>
      </div>
      <div class="quantity update-quantity">
        <label for="utreat">Quantity</label>
        <input type="number" name="product2" id="product2" min="1" value="1" data-price="110">
        <p class="price">£<span>110.00</span></p>
      </div>
    </div>
  </div>
  <div class="form-product">
    <div class="fields">
      <div>
        <h3>Cant change this product</h3>
      </div>
      <div class="quantity">
        <label for="pack">Quantity</label>
        <input type="text" name="pack" id="pack" min="1" max="1" value="1" disabled>
      </div>
    </div>
  </div>
  <h2>Price</h2>
  <p class="sub">Sub-Total: £<span>2064.50</span></p>
  <p>Shipping: £12.00</p>
  <p class="total">Total: £<span>2076.50</span></p>
</form>