関数から変数を取得してイベントで実行する

Question

私は価格を計算する関数を持っています。変数totalPriceは、選択の合計を計算します。私はその後totalPriceをdivに書いています。

私の体は変更イベントを実行していて、変更イベント内でcalcTotalPrice関数を実行しようとしていて、totalPrice変数にアクセスしようとしていますが、変数が定義されていません。

調整されたtotalPrice変数を自分の関数から取得してイベントで実行するにはどうすればよいですか？

function calcTotalPrice() { 
     var totalPrice = 0; 
     var discountPrice = 0; 

     if (package1.is(':checked') && package2.is(':checked')) { 
      $('.calendar-check:checked').each(function() { 
       var calSoloPrice = ($(this).data('solo-price')); 
       var calCombinedPrice = ($(this).data('combined-price')); 
       totalPrice += parseInt($(this).data('combined-price')); 
       discountPrice += calSoloPrice - calCombinedPrice; 
      }); 
      $('.tp-pack-check:checked').each(function() { 
       var tpSoloPrice = ($(this).data('solo-price')); 
       var tpCombinedPrice = ($(this).data('combined-price')); 
       totalPrice += parseInt($(this).data('combined-price')); 
       discountPrice += tpSoloPrice - tpCombinedPrice; 
      }); 
      $('#package-review-savings').html("<div class='discountMed'>You will be saving $" + discountPrice + " per order by bundling your product package.</div>"); 
     } 
     else { 
      if (package1.is(':checked')) { 
       $('.calendar-check:checked').each(function() { 
        totalPrice += parseInt($(this).data('solo-price')); 
       }); 
      } 
      if (package2.is(':checked')) { 
       $('.tp-pack-check:checked').each(function() { 
        totalPrice += parseInt($(this).data('solo-price')); 
       }); 
      } 
     } 
     $('#package-review-total').html("$" + totalPrice); 
    }; 
$('body').on('change', function() { 
     calcTotalPrice(); 
     console.log("Total Price" + totalPrice); 
}); 

Answer 1

関数内で変数を定義しました。その後、そのスコープにのみ存在します。

定義からvarを削除すると、グローバルにアクセスできるようになります（これは強くおすすめしませんが）。

より良い戦略は、あなたの関数が計算された値を返すようになります：それは計算していること

function calcTotalPrice() { 
    var totalPrice = 0; 
    var discountPrice = 0; 

    if (package1.is(':checked') && package2.is(':checked')) { 
     $('.calendar-check:checked').each(function() { 
      var calSoloPrice = ($(this).data('solo-price')); 
      var calCombinedPrice = ($(this).data('combined-price')); 
      totalPrice += parseInt($(this).data('combined-price')); 
      discountPrice += calSoloPrice - calCombinedPrice; 
     }); 
     $('.tp-pack-check:checked').each(function() { 
      var tpSoloPrice = ($(this).data('solo-price')); 
      var tpCombinedPrice = ($(this).data('combined-price')); 
      totalPrice += parseInt($(this).data('combined-price')); 
      discountPrice += tpSoloPrice - tpCombinedPrice; 
     }); 
     $('#package-review-savings').html("<div class='discountMed'>You will be saving $" + discountPrice + " per order by bundling your product package.</div>"); 
    } 
    else { 
     if (package1.is(':checked')) { 
      $('.calendar-check:checked').each(function() { 
       totalPrice += parseInt($(this).data('solo-price')); 
      }); 
     } 
     if (package2.is(':checked')) { 
      $('.tp-pack-check:checked').each(function() { 
       totalPrice += parseInt($(this).data('solo-price')); 
      }); 
     } 
    } 
    $('#package-review-total').html("$" + totalPrice); 
    return totalPrice; 
}; 
$('body').on('change', function() { 
    var totalPrice = calcTotalPrice(); 
    console.log("Total Price" + totalPrice); 
});