1

我有三个不同的选择框供用户选择。我需要一次访问所有三个选项的值，但不知道该怎么做。让我用一个例子来解释我的意思：

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

问题是，由于每个值都在一个函数内，我不知道如何在它们各自的函数之外同时访问这三个值。

知道我该怎么做吗？

4

4 回答 4

3

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

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);
于 2012-09-07T06:13:16.953 回答
1

尝试这个：

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

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

编辑：背景颜色的值需要是一个完整的字符串

于 2012-09-07T06:18:02.353 回答
0

声明函数外部的变量，然后修改函数内部的变量（在这种情况下返回值是无用的）：

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

您可能还想阅读范围。

于 2012-09-07T06:14:55.427 回答
0

您可以使用对象来管理这些值。

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表达式，也需要是字符串。
于 2012-09-07T06:18:24.867 回答