0

ページに jQuery UI スライダーがあります。それは次のように始まります：

$( "#slider" ).slider({
    value: 6,
    min: 6,
    max: 120,
    step: 6
});

これはうまくいきます。

その横に select 要素があり、オプションとして 6、12、および 24 があります。私が達成したいのは、ユーザーが 12 を選択すると、スライダーのステップ、最小値、および値がすべて 12 になることです (24 の場合も同じです)。私はすでに関数を構築しようとしました:

$('#dropdown').change(function(){
    $( "#slider" ).slider( "option", "value", $(this).val() );
    $( "#slider" ).slider( "option", "min", $(this).val() );
    $( "#slider" ).slider( "option", "step", $(this).val() );
    $( "#slider" ).slider( "option", "max", 120 );
});

ただし、これが行うのは、値を 12 にすることだけです。その後、スライダーをクリックすると、最後 (120) までずっとジャンプし、そこにとどまります。

スライダーを破棄して、最初から作り直す必要がありますか?

編集＃1：

Firebug をダウンロードして、コンソールでスライダーを確認したところ、すべての値が正しく返されました (最小 = 12、値 = 12、ステップ = 12、最大 = 120)。なぜそれがとても頑固で、ジャンプ/最後まで固執しているのか知っている人はいますか?

4

2 に答える 2

2

問題が見つかりました。<select> スライダーのオプションを変更するために使用する前に、からintまでの値を解析する必要があります。

$('#dropdown').change(function()
{
    var currentVal =  parseInt($("#slider").slider("value"));
    var newOptions = parseInt($(this).val());
    $( "#slider" ).slider( "value", currentVal);
    $( "#slider" ).slider( "option", "min", newOptions );
    $( "#slider" ).slider( "option", "step", newOptions );
    $( "#slider" ).slider( "option", "max", 120 );
});

実例

http://jsfiddle.net/DigitalBiscuits/VSBCT/1/

于 2012-04-03T23:42:48.490 に答える
0

実装は正しいです。ただし、結果をキャッシュすることはできます

$('#dropdown').change(function(){
    var val = this.value;
    $( "#slider" ).slider( "option", "value", val );
    $( "#slider" ).slider( "option", "min", val );
    $( "#slider" ).slider( "option", "step", val );
    $( "#slider" ).slidYou can er( "option", "max", 120 );
});
于 2012-04-03T23:54:54.973 に答える