2

jQuery スライダー UI を使用して、別の要素のクラスを変更したいと考えています。

たとえば、スライダーには 10 のステップがあり、各ステップには、ターゲット要素に適用される対応するクラスがあります。

例えば：

スライダーが位置 2 にある場合、要素は「.step-two」のクラスを持ち、スライダーが位置 6 にある場合、要素は「.step-six」のクラスを持ちます。

また、リリース時だけでなく、ユーザーがスライダーを動かしている間にクラスを変更したいと思います。これは可能ですか？

    $('#slider').slider({
    value:0,
    min: 0,
    max: 110,
    step: 11,

    slide: function(event,ui){

        if (ui.value<0) { 
            $('#object').addClass('step-one');
        } else if (ui.value<10) { 
             $('#object' ).addClass('step-two');

        }
    }
});
4

2 に答える 2

1

これを行う方法についての少しのヘルプがあります。なぜこれが必要なのかは私にはわかりません。

$("#slider").slider({
    min: 1,
    max: 10,
    step: 1,
    range: false,
    slide: function(event, ui) {
        $("#someotherElement").removeClass().addClass('step_'+ui.value); //adds class step_1 -> step_10 etc
    }
});​

または、「1」、「2」などを使用する必要がある場合は、配列を使用します。

var array = ['one','two','three','four','five','six'....etc]

$("#slider").slider({
    min: 0,
    max: 10,
    step: 1,
    range: false,
    slide: function(event, ui) {
        $("#someotherElement").removeClass().addClass('step_'+array[ui.value]);
    }
});​

フィドル

于 2012-10-29T16:44:25.150 に答える
0

はい、私が考えることができる1つの方法は次のとおりです。

$( "#slider" ).slider({
    value:1,
    min: 1,
    max: 10,
    slide: function( event, ui ) {
        $("#someElementID").removeClass("step-" + (ui.value - 1) + " step-" + (ui.value + 1)).addClass("step-" + ui.value);
    }
});

別の方法は次のとおりです。

var araClasses = new Array("step-one", "step-two", "step-three", "step-four", "step-five", "step-six", "step-seven", "step-eight", "step-nine", "step-ten");

$( "#slider" ).slider({
    value:0,
    min: 0,
    max: 9,
    change: function( event, ui ) { // change event is fired no matter how the slider is changed
        //  First remove all step classes
        for (x in araClasses) { $("#someElementID").removeClass(araClasses[x]) };
        // then add the relavant one
        $("#someElementID").addClass(araClasses[ui.value]);
    }
});
于 2012-10-29T16:44:15.557 に答える