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 になります (正しい) [すべてのデータ属性は期待どおりです]

2番目のオブジェクトを削除すると（ダミーのjavascript、全額= 50.00）

その後、小計は 10 になります (正しくありません。0 のはずです) [data-sub = "10"]

なぜこうなった？10はどこから来るの？どんな洞察も高く評価されます。

jquery .each() メソッドを使用してこれを行うより良い方法はありますか?

編集

デバッグを試みて、js に console.log を追加しました。コンソールに次のように表示されました。

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

奇妙に思えますが、RoR を使用しています。私は、destroy.js.erb (この投稿された js が存在する場所) に対応する format.js で応答する LineItems の破棄アクションを持っています。

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

それで、私が正しく読んだら、何かが削除されるたびに合計に加算および減算されますか? すべてを詳しく説明する方が常に良いと思います.6回の編集操作よりも維持する方がはるかに簡単です（追加、削除、番号の変更、数量の変更はカーブボールです）。

これは、セレクターに一致するすべての入力を合計できる関数です (セレクターは明らかに異なります)。

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 に答える