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

考虑在函数外部声明全局变量：

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 2

尝试这个：

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

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

编辑：background-color的值需要是一个完整的字符串

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);

您可能还想阅读范围 。

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()可以获得select的选定值。
• hsl是css表达式，它也需要是一个字符串。