JavaScript - 다른 함수에서 다른 변수에 액세스

Question

사용자가 선택할 수있는 세 개의 다른 선택 상자가 있습니다. 한 번에 세 가지 선택 항목의 값에 액세스해야하며이를 수행하는 방법을 알 수 없습니다. 지금

<select id="hue"> 
// Options 
</select> 

<select id="sat"> 
// Options 
</select> 

<select id="lig"> 
// Options 
</select> 

나는 다음과 같은 코드를 사용하는 각 선택 상자의 선택에 액세스하려면 : 제가하고 싶은 것은 액세스 할 수 있습니다, 지금

$('#hue').filter(':selected').val().change(function(){ 
    hueVal = $(this).val(); 
    return hueVal; 
}) 

$('#sat').filter(':selected').val().change(function(){ 
    satVal = $(this).val(); 
    return satVal; 
}) 

$('#lig').filter(':selected').val().change(function(){ 
    ligVal = $(this).val(); 
    return ligVal; 
}) 

을 제가 예와 의미를 설명하게 새로운 JQuery와 통화에서 동시에 세 개의 반환 값 (hueVal, satVal 및 ligVal)에 - 좋아는 다음과 같습니다

$('#header').css('background-color', hsl(hueVal+','+satVal+','+ligVal)); 

문제는 각각의 값은 함수 내이기 때문에 나도 몰라, 어떻게에 모든 일에 접근하십시오 그들 각자의 기능 밖에서 한꺼번에

어떻게하면됩니까?

Answer 1

이 시도 :

$('select').change(function() { 
    var hue = $('#hue').val(), 
     sat = $('#sat').val(), 
     lig = $('#lig').val(); 

    $('#header').css('background-color', 'hsl('+ hue +','+ sat +','+ lig +')'); 
}).trigger('change'); 

편집 : 배경 색상의 값은 전체 문자열

Answer 2

기능 밖에, 글로벌 변수 선언 고려해

var hueVal; 
var satVal; 
var ligVal; 

$('#hue').filter(':selected').val().change(function(){ 
    hueVal = $(this).val(); 
    return hueVal; 
}) 

$('#sat').filter(':selected').val().change(function(){ 
    satVal = $(this).val(); 
    return satVal; 
}) 

$('#lig').filter(':selected').val().change(function(){ 
    ligVal = $(this).val(); 
    return ligVal; 
}) 

$('#header').css('background-color', hsl(hueVal+','+satVal+','+ligVal); 

Answer 3

기능 이외의 변수를 선언 한 다음 함수 내부의 변수를 수정 (값을 반환하는 것은 이러한 문맥 쓸모)

var hueVal, 
    satVal, 
    ligVal; 

$('#hue').filter(':selected').val().change(function(){ 
    hueVal = $(this).val(); 
}); 

$('#sat').filter(':selected').val().change(function(){ 
    satVal = $(this).val(); 
}); 

$('#lig').filter(':selected').val().change(function(){ 
    ligVal = $(this).val(); 
}); 

그런 다음, 그들과 함께하고 싶은 것을 할 수 있습니다 예 :

$('#header').css('background-color', hsl(hueVal+','+satVal+','+ligVal); 

scope을 읽어 볼 수도 있습니다.

Answer 4

이 값을 관리 할 객체를 사용할 수를 할 필요가있다.

var color = { 
    hue: $('#hue').val(), 
    sat: $('#sat').val(), 
    lig: $('#lig').val() 
}; 

$('#hue,#sat,#lig').change(function() { 
    color[this.id] = $(this).val(); 
    $('#header').css('background-color', 'hsl('+color.hue+','+color.sat+','+color.lig+')'); 
}); 

참고 :

• 사용 .val()은 선택의 선택된 값을 얻을 수 있습니다.
• hsl은 CSS 표현식이므로 문자열이어야합니다.