jQuery UI Slider 每个值切换类

jQuery UI Slider each value switch class

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

我有一个jQuery UI Slider，范围在1-100之间。我想在 1-100 之间更改每个值的div 类。

如何最有效地遍历 1-100 之间的每个值，并为每个值切换一个新类？

答案（这是最终解决的结果）：

$( '#slider-container' ).slider({
min: 1,
max: 100,
slide: function() {
    var $activeBackgroundUrl = $('.position_100').css('background');

    return function(event, ui) {
        activeBackgroundUrl = 'url(images/numbers/1'+(ui.value < 10 ? '0' : '')+ ui.value +'.png)';
        $('.position_100').css('background', activeBackgroundUrl);
    };
}()
});

尝试使用闭包来缓存您的div。这样，就不会在每个slide事件上查询 DOM。相反，您的div仅查询和定义一次。

$('#slider-container').slider({
    min: 1,
    max: 100,
    slide: (function() {
        var $el = $('#myDiv'),
            activeClass = '';
        return function(e, ui) {
            $el.removeClass(activeClass);
            activeClass = 'number_1' + (ui.value < 10 ? '0' : '') + ui.value;
            $el.addClass(activeClass);
        };
    })();
});
相关文章：