JavaScriptで小計を正しく更新するにはどうすればよいですか？

Question

私は把握できないようなJavaScriptの更新機能を持っています。ドロップダウンが更新されると2回発射されているように見えるので、そこにはいけない余分なコストが追加されます。

は、ここに私の現在のコードです：

var updateTotal = function(option) { 
    var sumtotal; 
    var sum = 0; 

    // Add each product price to total 
    $(".product").each(function() { 
    var price = $(this).data('price'); 
    var selector = document.getElementById('variety_weight'); 
    var quantity = selector[selector.selectedIndex].value; 
    var ptotal = $(packaging).find('option:selected').val(); 

    if (ptotal == 2) { 
     var burlap = 4.99; 
     var subburlap = quantity * burlap; 
     var subtotal = price * quantity + subburlap; 
    } else { 
     var subburlap = 0.00; 
     var subtotal = price * quantity; 
    } 

    // Round to 2 decimal places. 
    subtotal = subtotal.toFixed(2); 

    // Display subtotal in HTML element 
    $('.productTotal', this).html(subtotal); 
    }); 

    // Total 
    $('.productTotal').each(function() { 
    sum += Number($(this).html()); 
    }); 

    sum = sum + 9.99; 
    $('#sum').html(sum.toFixed(2)); 
}; 

そして、私の最初のコードはこれです：

$('#variety_weight').change(function() { 
    /* 
    * Setting currently changed option value to option variable. 
    */ 
    var option = $(this).find('option:selected').val(); 

    /* 
    * Setting input box value to selected option value. 
    */ 
    alert("Firing variety"); 
    updateTotal(); 
}); 

$('#packaging').change(function() { 
    /* 
    * Setting currently changed option value to option variable. 
    */ 
    var option = $(this).find('option:selected').val(); 
    alert(option); 

    /* 
    * Setting input box value to selected option value. 
    */ 
    alert("Firing packaging"); 
    updateTotal(option); 
}); 

// Set this from local 
$('span.productTotal').each(function() { 
    $(this).before("") 
}); 

// Unit price 
$('.product p').each(function() { 
    var $price = $(this).parents("div").data('price'); 
    $(this).before($price); 
}); 

// Update totals when page first loads 
updateTotal(); 

最終結果は、そのユーザーがパッケージングオプションを選択し、オプション2にそれを切り替えたとき - I 4.99単位で数量と時間をとり、それを小計に加えるようにしています。

しかし、最初のロードとupdateTotal()関数はうまく動作しますが、パッケージ化オプションを選択してupdateTotal()関数を2回呼び出しているように見える場合は、4.99ではなく9.98が追加されます。

Answer 1

（論理で使用される）ビュー要素にはどのデータが含まれているかわからずに把握するのは難しいです。しかし、私の提案は

です。これは、ビューとビジネスロジックが結びついている、つまり懸念が明確に分離されていないという共通の副作用の1つです。 AngularJS、Backbone、EmberのようなすべてのMV *フレームワークは、それに対処しています。

少なくとも、JavaScriptオブジェクトでビジネスロジック（計算、foreachなど）を実行してから、最終的によりクリーンで信頼性が高くトラブルシューティングしやすい要素を表示するように結果を設定してください。

Answer 2

あなたはそれが唯一の4.99を追加する必要があることを言うが、オプション2がそこ

var subburlap = quantity * burlap; var subtotal = price * quantity + subburlap;

何ですか量値を選択している場合、あなたがこれを行いますか？ウェル

var quantity = selector[selector.selectedIndex].value; 

数量は2です。したがって、イベントを2回発射するのではなく、誤ってパッケージ値を追加しているようです。