jquery - 入力範囲のすべてのステップでdivの背景色を変更する方法は?

Question

入力タイプの範囲内の各ステップ (最大 10 ～ 15 個) ごとに色を定義したいと思います。そして、すべてのステップ変更で、div はその背景色を変更します。

Answer 1

ハンドラーを入力要素の変更イベントにバインドし、switch構造体を使用して表示する色を決定できます。

$("input[type='range']").change(function(e) {
    var value = $(e.target).val();
    switch(value) {
        case "1":
            $("div").css({backgroundColor: "#AABBCC"});
            break;
        case "2":
            //and so on
    }
});

これは、各値で何か他のことをする必要がある場合に役立ちます。ただし、背景色を変更するだけの場合は、配列ルックアップを使用できます。

var colors = ["#AABBCC", "#BBCCDD", "#CCDDEE", ...];
$("div").css({backgroundColor: colors[value]});

Answer 2

.css()2 つのパラメーターまたは map を取ります{}。

$('.slider').change(function() {
    var green = this.value(2);
    $('.bar').css("background-color", "#ff0000");
});

もちろん、これはスライド変更ごとに背景色を変更しません。しかし、おそらくそれは自分自身で理解することができます。あなたのCSS機能は修正されています。