javascript - jQuery UI Slider 每个值切换类

Question

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

}()

});

Answer 1

尝试使用闭包来缓存您的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);
        };

    })();
});