0

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

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

jsFiddle

于 2012-08-04T20:29:35.460 回答
0

不会：

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

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

使用三个类的快速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 回答