javascript - 当 javascript 数据标签用于操作 AJAX 成功的 dom 值时得到错误的值

Question

我正在设置一个包含许多 items 和 subtotal 的购物车。当有人单击 remove 时，该项目被成功销毁，并且使用 jquery 成功地从 View 中隐藏了该项目。问题是我在 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 for dummies，全价=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

Answer 1

那么，如果我没看错的话，每次删除某些内容时，您都会对总数进行加减？ 我发现重新计算一切总是更好，它比六个编辑操作(添加、删除、数字更改、数量更改是一个曲线球)更容易维护。

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

function add(){
    var total = 0;
    $('input').each(function(i,domEl){
            var val = $(domEl).val();
            if(!isNaN(val)){
                total += parseFloat(val);
            }
    });
    return total;
}