Question

我正在尝试使用jQuery UI滑块构建一组过滤器，以便用户可以根据应用于对象的数据属性来滑动它们并过滤掉项目（在这种情况下是时间）。

请参阅代码和测试用例的小提琴：http://jsfiddle.net/thecrumb/7Err4/1/

function doShowHideBadges() {
    //show all initially then loop through each
    $('div[id^="block"]').removeClass('hidden').each(function (e) {
        var sliderValue1 = $('.slider-range0').slider("option", "values");
        var sliderValue2 = $('.slider-range1').slider("option", "values");
        console.clear();
        console.log(sliderValue1[0] + '-' + sliderValue1[1] + ' | ' + sliderValue2[0] + '-' + sliderValue2[1]);
        if (
            ($(this).data('departuretime0') < sliderValue1[0] || $(this).data('departuretime0') > sliderValue1[1]) &&
            ($(this).data('arrivaltime0') < sliderValue2[0] || $(this).data('arrivaltime0') > sliderValue2[1])
        ) {
            $(this).addClass('hidden');
        } else {
            $(this).removeClass('hidden');
        }
    });
}

我终于让这个工作就像我想要 BUT 一样只有当用户移动两个滑块时。我需要的是基于过滤器显示/隐藏的对象 - 而不是两者。

Answer 1

你为什么要打击他们的api？

使用jQuery UI:

中的slide事件

$( ".slider-range0" ).slider({
    slide: function( event, ui ) {
        // show and hide functions in here

    }
});

...

如果jQuery UI滑块已移动，我该如何才能应用我的检查？

1 个答案: