基于 *multiple* jQuery UI 滑块的 jQuery 显示/隐藏元素

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 语句来检查所有排列，但似乎应该有更有效的方法来做到这一点？

更新：

小提琴：http://jsfiddle.net/thecrumb/FB4Sv/27/

使用/测试用例：

• 将出发滑块设置为上午 7 点至 9 点 - 应显示徽章 A 和 B（上午 8 点）
• 在不更改第一个滑块的情况下，将到达滑块设置为晚上 7 点到 9 点 - 应显示徽章 C（晚上 8 点）
• 此时应显示徽章 A、B 和 C。
• D 仍应隐藏。

仍然坚持这个:(

Answer 1

是 AND 还是 OR 情况？

假设它是 OR 你可以做这样的事情......

首先你把它们全部隐藏起来。然后显示每个滑块的适用对象

// 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/