1

ユーザーが選択できる3つの異なる選択ボックスがあります。3つの選択すべての値に一度にアクセスする必要があり、その方法がわかりません。例を挙げて、私が何を意味するのかを説明しましょう。

<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呼び出しで同時に3つの戻り値（hueVal、satVal、およびligVal）にアクセスすることです。

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

問題は、各値が関数内にあるため、それぞれの関数の外で3つすべてに一度にアクセスする方法がわからないことです。

どうすればこれができるのでしょうか？

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

編集：background-colorの値は完全な文字列である必要があります

于 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()すると、選択の選択された値を取得できます。
  • hslcss式であり、文字列である必要もあります。
于 2012-09-07T06:18:24.867 に答える