jQuery показать/скрыть элементы на основе * multiple * jQuery UI слайдеры

Question

Я пытаюсь создать фильтр времени в стиле авиакомпании.

У меня есть ряд «значков», каждый из которых с серией раз в секундах:

<div id="block732914299" class="pull-left" data-departuretime1="1340" data-departuretime0="865" data-arrivaltime0="980" data-arrivaltime1="10"> 

Теперь я хочу использовать ползунки JQuery UI, чтобы показать/скрыть различные знаки, основанные на эти времена.

У меня есть один рабочий.

$(".slider-range1").slider({ 
    range: true, 
    min: mintime, 
    max: maxtime, 
    step: steptime, 
    values: [mintime, maxtime], 

    slide: function (e, ui) { 
     var time2 = moment().startOf('day').add('m', ui.values[0]).format('h:mma'); 
     var time3 = moment().startOf('day').add('m', ui.values[1]).format('h:mma'); 
     $('.slider-time2').html(time2); 
     $('.slider-time3').html(time3); 

     // show or hide badges based on attr for each badge 
     $('div[id^="block"]').each(function(e){ 
      if($(this).data('arrivaltime0') >= ui.values[0] && $(this).data('arrivaltime0') <= ui.values[1]){ 
       $(this).show(); 
      } else { 
       $(this).hide() 
      } 
     }); 
    } 
}); // slider-range1 

Но я немного застреваю, когда добавляю второй слайдер, потому что теперь они конфликтуют. Когда я изменяю один слайдер, он переопределяет другой.

Копаясь в документах jQuery, я смотрю на .filter - но я не уверен, как лучше всего использовать это.

Возможно, я могу написать кучу уродливых операторов if/else, чтобы проверить все перестановки, но кажется, что должен быть более эффективный способ сделать это?

Update:

Fiddle: http://jsfiddle.net/thecrumb/FB4Sv/27/

Использование/тест:

• Набор вылета ползунок 7-9AM - знак А и B должен показывать (8 утра)
• Без изменения первого слайдера установите ползунок прибытия на 7-9PM - Значок C должен отображаться (8pm)
• При t его значки A, B AND C должны отображаться.
• D все еще должен быть скрыт.

Тем не менее застрял с этим :(

Answer 1

является его элемент И или ИЛИ ситуация?

Предполагая, что это или вы могли бы сделать что-то вроде этого ...

FIRST скрыть их всех . ТОГДА вы показываете применимые для каждого слайдера

// show or hide badges based on attr for each badge 
$('div[id^="block"]').hide().each(function(e){ 
    if($(this).data('arrivaltime0') >= ui.values[0] && $(this).data('arrivaltime0') <= ui.values[1]){ 
     $(this).show(); 
    } 
}); 

Если вы хотите И вы просто делаете обратное, покажите им все ан скрыть недопустимых

// show or hide badges based on attr for each badge 
$('div[id^="block"]').show().each(function(e){ 
    if(! ($(this).data('arrivaltime0') >= ui.values[0] && $(this).data('arrivaltime0') <= ui.values[1])){ 
     $(this).hide(); 
    } 
}); 

Проблема с текущим кодом является то, что он показывать или скрывать каждый элемент каждый раз, так что различные ползунки наступив на друг друга.

Answer 2

Вот обновленный ответ с использованием функции. Я просто понял, что я создать новый ответ, чтобы сделать его чище ...

$(".slider-range1").slider({ 
    range: true, 
    min: mintime, 
    max: maxtime, 
    step: steptime, 
    values: [mintime, maxtime], 

    slide: function (e, ui) { 
     var time2 = moment().startOf('day').add('m', ui.values[0]).format('h:mma'); 
     var time3 = moment().startOf('day').add('m', ui.values[1]).format('h:mma'); 
     $('.slider-time2').html(time2); 
     $('.slider-time3').html(time3); 
     doShowHideBadges();   
    } 
}); // slider-range1 

function doShowHideBadges(){ 
    //show all initially then loop through and hide each invalid option 
    $('div[id^="block"]').show().each(function(e){ 
     //show items for first slider 
     var sliderValue = $('.slider-range0').slider("option", "values"); 
     if($(this).data('departuretime0') < sliderValue[0] || 
      $(this).data('departuretime0') > sliderValue[1]){ 
      $(this).hide();    
     } 
     // show items for second slider 
     var slider2Value = $('.slider-range1').slider("option", "values"); 
     if($(this).data('arrivaltime0') < slider2Value[0] || 
      $(this).data('arrivaltime0') > slider2Value[1]){ 
      $(this).hide();   
     } 

    }); 
} 

http://jsfiddle.net/FB4Sv/17/