2

我正在尝试做一些我认为很简单的事情（！），但是遇到了麻烦。每次用户更新下面的表单时，我想通过将数量（输入值）乘以数据属性来更新购物车总数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>

查询

// 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');
});
4

3 回答 3

3

您只需要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/

于 2015-04-07T17:28:38.967 回答
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]”获取正确的元素来做到这一点。

于 2015-04-07T17:36:34.017 回答
0

在您的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);
});

您还需要删除varst 之前的关键字，因为它创建一个新的 st 变量而不是更新外部变量。

看到这个小提琴

于 2015-04-07T17:35:24.487 回答