如果jQueryUI滑块已移动，如何仅应用检查？

我正在尝试使用jQuery UI滑块构建一组过滤器，以便用户可以滑动它们，并根据应用于对象的数据属性筛选出项目（在本例中，是时候了）

有关代码和测试用例，请参见fiddle：

函数doShowHideBadges（）{
//最初显示所有，然后循环每个
$（'div[id^=“block”]”）。removeClass（'hidden'）。每个（函数（e）{
var sliderValue1=$（'.slider-range0'）。滑块（“选项”，“值”）；
var sliderValue2=$（'.slider-range1'）。滑块（“选项”，“值”）；
console.clear（）；
log（sliderValue1[0]+'-'+sliderValue1[1]+'|'+sliderValue2[0]+'-'+sliderValue2[1]）；
如果(
（$（this）.data（'departuretime0'）sliderValue1[1]）&&
（$（this）.data（'arrivaltime0'）sliderValue2[1]）
) {
$（this.addClass（'hidden'）；
}否则{
$（this.removeClass（'hidden'）；
}
});
}

---

我终于可以像我想要的那样工作了，但前提是用户同时移动两个滑块。我需要的是基于任意一个过滤器显示/隐藏的对象，而不是同时显示/隐藏这两个过滤器。

您为什么要反对它们的

api

使用来自的

幻灯片

事件

---

你看小提琴了吗？我正在使用幻灯片事件-我从那里调用doShowHideBadges（）。我检查了你的小提琴。每当滑块手柄滑动时，都会执行doShowHidebages（）。

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

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

    }
});

...