使用jQuery計算購物車總計

Question

我正在嘗試做一些我認為很簡單的事情（！），但遇到了麻煩。 每次用戶更新下面的表格時，我想通過將數量（輸入值）乘以數據屬性unit-price來更新購物車總額。

我以為我只需要遍歷每個輸入並獲取值和unit-price這樣我就可以將它們相乘以創建一個總計，但是我小計返回的是“ 0” ...關於我的任何想法我做錯了嗎？

JS菲德爾

http://jsfiddle.net/wy5hy42x/

HTML

<form action="" id="form">
    <div class="cart-row">
        <p>Product name</p>
        <label for="updates">Quantity:</label>
        <input type="number" name="updates[]" value="2" min="0" data-unit-price="18.00" class="cart-variant--quantity_input"><br />
        &pound;18 each
    </div>

    <div class="cart-row">
        <p>Product name</p>
        <label for="updates">Quantity:</label>
        <input type="number" name="updates[]" value="4" min="0" data-unit-price="31.00" class="cart-variant--quantity_input"><br />
        &pound;31 each
    </div>

    <div class="cart-row">
        <p>Product name</p>
        <label for="updates">Quantity:</label>
        <input type="number" name="updates[]" value="4" min="0" data-unit-price="12.00" class="cart-variant--quantity_input"><br />
        &pound;12 each
    </div>
    <input type="submit" value="submit" />
</form>

JQUERY

// Update final price on quantity change
$('.cart-variant--quantity_input').on("change", function() {
  var st            = 0;
  $('.cart-row').each(function() {
    var i           = $('.cart-variant--quantity_input');
    var up          = $(i).data('unit-price');
    var q           = $(i).val();
    var st          = st + (up * q);
  });
  // Subtotal price
  alert('Cart updated. Subtotal : ' + st + 'GBP');
});

Answer 1

您只需要從此行中刪除var關鍵字：

var st = st + (up * q);
// ^-- remove var in fron of st

否則，您將在$ .each回調內創建局部變量，並且永遠不要更新外部st值。

UPD。 （此收獲歸Dustin Hoffner所有。）第二個問題是，您需要在當前.cart-row容器中找到.cart-variant--quantity_input元素。 例如，通過為選擇器提供上下文：

var i = $('.cart-variant--quantity_input', this);

一起將成為

$('.cart-variant--quantity_input').on("change", function () {
    var st = 0;
    $('.cart-row').each(function () {
        var i = $('.cart-variant--quantity_input', this);
        var up = $(i).data('unit-price');
        var q = $(i).val();
        st = st + (up * q);
    });
    // Subtotal price
    alert('Cart updated. Subtotal : ' + st + 'GBP');
});

演示： http ： //jsfiddle.net/wy5hy42x/9/

Answer 2

第一個答案不完整：

$('.cart-row').each(function(k) {
        var i           = $('.cart-variant--quantity_input')[k];
        var up          = parseFloat($(i).data('unit-price'));
        var q           = parseInt($(i).val());
        st          += (up * q);
      });

編輯：將parseInt更改為parseFloat（由於War10ck）（請參閱他的評論以了解原因）

我刪除了“ var”，因為您將在每個循環中覆蓋。

此外，您將無法正確計算：

var i           = $('.cart-variant--quantity_input');

這將始終為您提供第一個要素。 但是您不止一個，因此您只需要從返回的數組中獲取實際的一個即可。

$('.cart-row').each(function(k) {
        var i           = $('.cart-variant--quantity_input')[k];

您可以通過從循環中獲取計數器“ k”並使用“ [k]”獲得正確的元素來實現。

Answer 3

在each循環中，您需要采用當前輸入，而不是第一個輸入：

$('.cart-row').each(function(e) {
    var i           = $('.cart-variant--quantity_input').eq(e); // get item in the e position
    var up          = $(i).data('unit-price');
    var q           = $(i).val();
    st          = st + (up * q);
});

另外，您還需要在st之前刪除var關鍵字，因為它會創建一個新的st變量，而不是更新外部變量。

看到這個小提琴