Question

我有一个jQuery UI Slider，范围在1-100之间。我想为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);

Answer 1

似乎有点长啰嗦，但在检查对方回答之后，toggleClass似乎还不够;仅因为每slide我们可能会添加一个类，从而在项目上产生多个“数字类”，即类属性值为：number_101 number_102 number_103。相反，我假设您只是在追踪最近的ui.value更改？

如果是这种情况，可以使用jQuery中的data方法实现，并且只需记住添加的最新类，如下所示：

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);
}

我知道这可能看起来有点长，但这确实意味着我们在滑动后只有一个“数字级”。

jsFiddle

Answer 2

岂不：

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

效率更高？这假设您的类名对应于滑块值，因此值10等于类名“number_1010”。

使用三个类快速 jsFiddle example 。

Answer 3

试试这个：

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);
}

jQuery UI Slider为每个值更改类

3 个答案:

jsFiddle