Javascript jQuery UI滑块为每个值更改类

我有一个jQueryUI滑块，范围在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' );
    }
}
});

或者（但不确定如何查找/删除最后添加的类？）

$（'.position_100'）.removeClass（）.addClass（（ui.value不会：

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

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

快速使用三个类。
尝试以下方法：

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

幻灯片：功能（事件、用户界面）{
如果（ui.value<10）{
$（“.number_100”）.toggleClass（'number_10'+ui.value）；
}否则{
$（“.number_100”）.toggleClass（'number_1'+ui.value）；
}
}

或：

幻灯片：功能（事件、用户界面）{

---

$（“.number_100”）.toggleClass（（ui.value似乎有点冗长，但在检查另一个答案后，似乎

toggleClass

不够；这仅仅是因为对于每张

幻灯片

我们都可能添加一个类，从而导致多个“数字类”在该项上，即类属性值为：

number\u 101 number\u 102 number\u 103

。相反，我假设您只是在处理最近的

ui.value

更改

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

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

幻灯片：功能（事件、用户界面）{ if（div.data（'lastClass'））{ div.removeClass（div.data（'lastClass'））； } var newClass=ui.value<10？'number\u 10'+ui.value:'number\u 1'+ui.value； div.data（'lastClass'，newClass.）.addClass（newClass）； } 我知道这可能看起来有点冗长，但这确实意味着我们在滑动之后只有一个“数字类”

---

这不是简单地添加类<代码>编号10101 ，<代码> NoMyLy102，<代码> NoMyBuy103……当你滚动的时候，检查这个JsFoDLE的控制台，我喜欢这个。我提出了一个基于背景图像的不同版本，而不是添加所有这些类：很棒，请考虑这个投票或选择这个作为接受答案。我喜欢removeClass/addClass，并添加了它（请参见文章顶部）。我以前从未使用过.data。如何查找lastClass？

。data

只是以键/值对格式存储对象信息的一种方法。在本例中，我们在添加类时存储

lastClass

，然后在更改它时存储它（即下一个呼叫）我们正在检查是否已经添加了一个，并在更新之前将其删除。

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

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