1

スライダーの値に問題があります。var R、G、B をスライダーで変更したい。現時点では、スライダーの使用をやめた後にのみ変更されます。何か案は？

var R = $("#RSlider").slider('value');
var G = $("#GSlider").slider('value');
var B = $("#BSlider").slider('value');

var colour = R + 256 * G + 65536 * B;
document.getElementById('color').innerHTML = colour.toString(16);

$("#BSlider").slider({
value: props["col1"].toFixed(2).replace('-',''),
step: 5,
min: 100,
max: 255,
slide: function(event, ui) {
}
});

$("#GSlider").slider({
value: props["col2"].toFixed(2).replace('-',''),
step: 5,
min: 100,
max: 255,
slide: function(event, ui) {
}
});

$("#RSlider").slider({
    value: props["col3"].toFixed(2).replace('-',''),
step: 5,
min: 100,
max: 255,
slide: function(event, ui) {                    
}

});

4

1 に答える 1

2

jQuery UI を使用していると仮定します。その場合は、現在使用している空の関数ではなく、「スライド」コールバックを利用するだけで済みます。

function print_color() {
    var R = $("#RSlider").slider('value');
    var G = $("#GSlider").slider('value');
    var B = $("#BSlider").slider('value');

    var colour = R + 256 * G + 65536 * B;
    //document.getElementById('color').innerHTML = colour.toString(16);
    $('#color').html(colour.toString(16));
}

$("#BSlider").slider({
    //These are giving me errors and I'm not sure what they do, so I'm commenting them out.
    //value: props["col1"].toFixed(2).replace('-', ''),
    step: 5,
    min: 100,
    max: 255,
    slide: print_color
});

$("#GSlider").slider({
    //value: props["col2"].toFixed(2).replace('-', ''),
    step: 5,
    min: 100,
    max: 255,
    slide: print_color
});

$("#RSlider").slider({
    //value: props["col3"].toFixed(2).replace('-', ''),
    step: 5,
    min: 100,
    max: 255,
    slide: print_color
});

print_color();

フィドル、必要に応じて: http://jsfiddle.net/luhn/5b4Kc/

于 2012-04-27T00:00:05.303 に答える