Как получить доступ к переменной внутри функции в jQuery?

Question

Я поместил некоторую радио-кнопку для прайс-листа. я написал это:

$(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); 
}); 

я могу получить доступ к этим переменной внутри метода ON, но я хочу Плюс все они & положить, что в .totalPrice класса ... Любой способ сделать это? Благодаря ...

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

Возьмите момент и готов:

Decoupling Your HTML, CSS, and JavaScript

Так что, если я это сделал, это было бы:

$(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); 
    }); 
}); 

Теперь вместо всех сильно связанных элементов (используя имена идентификаторов и тегов элементов), вы можете просто применить класс к элементам, которые корректируют общую цену. Любой, кто изменяет идентификаторы или тип ввода, не нарушит javascript.