1

我正在设置一个有很多items和一个subtotal. 当有人单击remove该项目时，该项目被成功销毁，并且该项目使用 jquery 成功地从视图中隐藏。问题是我对 javascript 小计的计算给了我疯狂的数字。我使用数据标签计算小计以保存值，然后将小计数据标签重置为其新值（因此新的删除具有正确的计算）。

html

<div style="padding-top:5px;" class="container backdrop add-top">
    <div class="row itemrow">
    <div class="six offset-by-one columns">Pool Noodles</div>
    <div class="three columns">
      <ul class="unstyled cartqty">
        <form accept-charset="UTF-8" action="/line_items/61" class="remove-bottom" data-remote="true" id="edit_line_item_61" method="post">
                 <div style="margin:0;padding:0;display:inline">
                     <input name="utf8" type="hidden" value="&#x2713;" />
                     <input name="_method" type="hidden" value="put" />
                     <input name="authenticity_token" type="hidden" value="eQhVhHqr2ZsLR1chbyngY0XRB/S40ckR4luq37qvvkc=" /></div>
        <li class="magna remove-bottom">
                  <input class="small-input" id="line_item_quantity" name="line_item[quantity]" type="number" value="1" />
          <input class="button-to-link outerspace remove-bottom" name="commit" type="submit" value="update" /></li>
</form>     <li class="magna">
                   <a href="/line_items/61" class="destroyer button-to-link" data-method="delete" data-price="10.0" data-remote="true"  rel="nofollow">remove</a></li>
        </ul>
    </div>
        <div class="two columns">each @$10.00</div>
    <div class="two columns">= $10.00</div>
</div>
    <div class="row itemrow">
                  <br/>
        <div class="six offset-by-one columns">Javascript for Dummies</div>
            <div class="three columns">
        <ul class="unstyled cartqty">
            <form accept-charset="UTF-8" action="/line_items/59" class="remove-bottom" data-remote="true" id="edit_line_item_59" method="post">
<div style="margin:0;padding:0;display:inline">
                        <input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" />
                        <input name="authenticity_token" type="hidden" value="eQhVhHqr2ZsLR1chbyngY0XRB/S40ckR4luq37qvvkc=" /></div>
              <li class="magna remove-bottom"><input class="small-input" id="line_item_quantity" name="line_item[quantity]" type="number" value="5" />
            <input class="button-to-link outerspace remove-bottom" name="commit" type="submit" value="update" /></li>
</form>       <li class="magna"><a href="/line_items/59" class="destroyer button-to-link" data-method="delete" data-price="50.0" data-remote="true" rel="nofollow">remove</a></li>
    </ul>
</div>
<div class="two columns">each @$10.00</div>
<div class="two columns">= $50.00</div>
</div>
<div class="row checks">
    <br/>
        <div class="three offset-by-eleven columns">
            <span class="pull-right">
    Subtotal:&nbsp; <span id="subtotal" data-sub="60.0">$60.00</span>
                    </span>
        </div>
</div>
</div>

Javascript

jQuery(function() {
    return $("a[data-remote]").on("ajax:success", function(e, data, status, xhr) {
        e.preventDefault();
        newVal = (Number($("#subtotal").data('sub')) - Number($(this).data('price'))).toFixed(2);
        console.log("newval="+newVal);
        $("#subtotal").html("$" + newVal);
        $("#subtotal").attr('data-sub', newVal);
        return $(this).closest('.itemrow').hide();
    });
});

小计 = 60。

当我删除第一个对象时（池面，全价=10.00）

然后小计变为 50（正确）[所有数据属性都符合预期]

当我删除第二个对象时（用于傻瓜的 javascript，全价 = 50.00）

然后小计变为 10（不正确，应该是 0）[data-sub = "10"]

为什么会这样？10 是从哪里来的？任何见解都值得赞赏。

有没有更好的方法使用 jquery .each() 方法来做到这一点？

编辑

我将 console.log 添加到 js 以尝试调试。我在控制台中得到以下信息：

newval=50.00
newval=50.00
newval=10.00
newval=10.00
newval=10.00

看起来很奇怪，我正在使用 RoR。我对 LineItems 有一个销毁操作，它以对应于 destroy.js.erb 的 format.js 响应（此发布的 js 所在的位置）：

def destroy
    @line_item = LineItem.find(params[:id])
    @line_item.destroy

    respond_to do |format|
            format.html { redirect_to current_cart_url }
            format.js
    end
  end
4

3 回答 3

2

那么，如果我没看错的话，每次移除某些东西时，您都会在总数中加减？我发现重新计算所有内容总是更好，维护比六次编辑操作容易得多（添加，删除，数字更改，数量更改是一个曲线球）。

这是一个可以将所有与选择器匹配的输入相加的函数（您的选择器显然会有所不同）。

function add(){
    var total = 0;
    $('input').each(function(i,domEl){
            var val = $(domEl).val();
            if(!isNaN(val)){
                total += parseFloat(val);
            }
    });
    return total;
}
于 2013-08-22T16:43:22.833 回答
1

快速解决方法是改变这一点：

$("#subtotal").attr('data-sub', newVal);

对此：

$("#subtotal").data('sub', newVal);

于 2013-08-22T16:52:16.857 回答
0

这是我一直在寻找的答案。使用 .each() 和每个行项目链接的数据属性。成功调用 ajax 时，单击链接的数据属性设置为 0。通过将每个数据价格相加并用总和替换小计来迭代行项目。

function addItems(){
  var subtotal = 0;
  $('.destroyer').each(function(index){
  var val = $(this).data('price');
  if(!isNaN(val)){
      subtotal += parseFloat(val);
    }
  });
  return total;
}
jQuery(function() {
    return $("a[data-remote]").on("ajax:success", function(e, data, status, xhr) {
        e.preventDefault();
        $(this).data('price', 0);
        $(this).closest('.itemrow').hide();
        total = addItems();
        return $("#subtotal").html("$" + Number(total).toFixed(2));
    });
});
于 2013-08-22T21:31:29.353 回答