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-9AM - 徽章A和B应显示（8am）
在不更改第一个滑块的情况下，将到达滑块设置为7-9PM - 应显示徽章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/

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

2 个答案: