0

範囲が 1 ～ 100 の jQuery UI Slider があります。1〜100の値ごとにdivのクラスを変更したい。

クラスを切り替えて値を調べるためのより効率的な JavaScript メソッドがあることを私は知っています。else if ステートメント以外のより良い方法はありますか?

これをより効率的にするためのヒントをいただければ幸いです。

$( '#slider-container' ).slider({
min: 1,
max: 100,
slide: function( event, ui ) {
    if ((ui.value == 2)) { 
        $( ".number_100" ).toggleClass( 'number_102' );
    } else if ((ui.value == 3)) { 
        $( ".number_100" ).toggleClass( 'number_103' );
    }
}
});

または（ただし、最後に追加されたクラスを見つけて削除する方法がわかりませんか？）

<div class="position_100 number_101"></div>    

$( '.position_100' ).removeClass().addClass((ui.value<10) ? 'number_10'+ui.value : 'number_1'+ui.value);
4

3 に答える 3

1

少し長くなってしまいましたが、他の方の回答を確認したところ、toggleClass十分ではないようでした。単にslideクラスを追加する可能性があるため、アイテムに複数の「番号クラス」が発生するためです。つまり、クラス属性値は:number_101 number_102 number_103でした。代わりに、単に最新のui.value変更を求めているだけだと思いますか?

その場合は、datajQuery 内のメソッドを使用して達成できます。次のように、追加された最新のクラスが何であったかを覚えておくだけで済みます。

slide: function(event, ui) {
    if (div.data('lastClass')) {
        div.removeClass(div.data('lastClass'));                   
    }

    var newClass = ui.value < 10 ? 'number_10' + ui.value : 'number_1' + ui.value;
    div.data('lastClass', newClass).addClass(newClass);
}

少し長くなってしまうかもしれませんが、これは、スライド後の「数値クラス」が 1 つしかないことを意味します。

jsフィドル

于 2012-08-04T20:29:35.460 に答える
0

しません:

slide: function( event, ui ) {
    $( ".number_100" ).toggleClass( 'number_10'+ui.value );
}

より効率的になる？これは、値 10 が「number_1010」のクラス名に等しいように、クラス名がスライダーの値に対応していると想定しています。

3 つのクラスを使用した簡単な jsFiddle の例。

于 2012-08-04T20:08:44.347 に答える
0

これを試して：

slide: function( event, ui ) {
    if (ui.value < 10) { 
        $( ".number_100" ).toggleClass( 'number_10'+ui.value );
    } else { 
        $( ".number_100" ).toggleClass( 'number_1'+ui.value );
    }
}

また：

slide: function( event, ui ) {
   $(".number_100").toggleClass((ui.value<10) ? 'number_10'+ui.value : 'number_1'+ui.value);
}
于 2012-08-04T20:12:41.797 に答える