Я пытаюсь создать набор фильтров с ползунками 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');
}
});
}
Я, наконец, работаю так, как хочу, но только если пользователь перемещает оба ползунка. Мне нужны объекты, которые должны отображаться/скрываться на основе любого из фильтров - не обоих.
Почему вы боретесь с их api
?
Используйте событие slide
из пользовательского интерфейса jQuery:
$( ".slider-range0" ).slider({
slide: function( event, ui ) {
// show and hide functions in here
}
});
...