javascript - 使用 jQuery 计算购物车总数

Question

我正在尝试做一些我认为很简单的事情(!)，但遇到了麻烦。每次用户更新下面的表单时，我都想通过将数量(输入值)乘以数据属性unit-price来更新购物车总数。

我以为我只需要循环遍历每个输入并获取值和单价，这样我就可以将它们相乘以创建总计，但我的小计返回“0” '...我做错了什么有什么想法吗？

JS FIDDLE

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-variant--quantity_input 元素.cart-row 容器。例如，通过为选择器提供上下文:

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/