使用 jQuery 计算购物车总数

Question

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

来更新购物车总数

我以为我只需要遍历每个输入并获取值和 unit-price 这样我就可以将它们相乘以创建总计，但我是小计返回“0”.. .我做错了什么？

JS FIDDLE

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

在您的 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 变量而不是更新外部变量。

看到这个fiddle

Answer 3

第一个回答不完整：

$('.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]”获取正确的元素来做到这一点。

使用 jQuery 计算购物车总数

Calculating cart total using jQuery

javascript

jquery

cart

jquery-calculation