jQuery UI Slider为每个值更改类

jQuery UI Slider change class for each value

本文关键字：UI Slider jQuery      更新时间：2023-09-26

我有一个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);

这似乎有点冗长，但在检查了另一个答案后，似乎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

试试这个：

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

不会：

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

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

快速jsFiddle示例使用三个类。

相关文章：