jQueryで関数内の変数にアクセスするには？

Question

私は価格表のためにラジオボタンをいくつか入れました。 私はこの書かれている：Plusに私は上のメソッド内でこれらの変数にアクセスすることができますが、私がしたい

$(document).ready(function() { 
    $('#windowsRange input').on('change', function() { 
     var windowPrice = $('input[name=windowName]:checked', '#windowsRange').val(); 
    }); 
    $('#profilesRange input').on('change', function() { 
     var profilePrice = $('input[name=profileName]:checked', '#profilesRange').val(); 
    }); 
    $('#tapesRange input').on('change', function() { 
     var tapePrice = $('input[name=tapeName]:checked', '#tapesRange').val(); 
    });  
    $('.totalPrice').html(windowPrice + profilePrice + tapePrice); 
}); 

をそれらのすべてが.totalPriceクラス... でこれを行うにはどのような方法をそれを置く&？

Decoupling Your HTML, CSS, and JavaScript

私はそれをしなかったのであれば、それは次のようになります： おかげで...

Answer 1

あなたは、単にそれが "グローバル"

$(document).ready(function() { 
    var windowPrice, profilePrice, tapePrice; 
    $('#windowsRange input').on('change', function() { 
     windowPrice = parseInt($('input[name=windowName]:checked', '#windowsRange').val()); 
     setTotal(); 
    }); 
    $('#profilesRange input').on('change', function() { 
     profilePrice = parseInt($('input[name=profileName]:checked', '#profilesRange').val()); 
     setTotal(); 
    }); 
    $('#tapesRange input').on('change', function() { 
     tapePrice = parseInt($('input[name=tapeName]:checked', '#tapesRange').val()); 
     setTotal(); 
    }); 
    function setTotal() {  
     $('.totalPrice').html(windowPrice + profilePrice + tapePrice); 
    } 
    setTotal(); 
}); 

Answer 2

はモーメントと準備を取るvarsは作ることができます

$(document).ready(function() { 
    var totalPriceElements = '.js-adjust-total-price'; 

    $(totalPriceElements).on('change', function() { 
     var totalPrice = 0; 
     $(totalPriceElements).each(function(i, element){ 
      totalPrice += $(element).val(); 
     }) 
     $('.totalPrice').html(totalPrice); 
    }); 
}); 

すべての高度に結合した要素の代わりに（ IDと要素タグ名を使用して）、総価格を調整する要素にクラスを適用することができます。 IDや入力の種類を変更した人は、javascriptを破損しません。