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-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/

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

请参阅此fiddle

使用jQuery计算购物车总数

3 个答案: