Question

我正在为地图构建侧面板，并且有路径列表每条路径都可以标记3个标记 walk ， bike ， drive 。
标志的所有组合都是可能的，但至少应该有一个。

我的任务是创建3个过滤器按钮，根据类型隐藏和显示列表元素。

修改
所有行都根据类型.walk，.bike，.drive标记（组合）类。
如果对应于其类的过滤器的 ANY 处于活动状态，则应该可以看到一行。

这是一个可以完成工作的工作示例......但不是很漂亮：

function updatePathTypes(){ 
    var w = $('#filter_walk.active').length;
    var b = $('#filter_bike.active').length;
    var d = $('#filter_drive.active').length;
    console.log('w:'+w +', b:'+b+', d:'+d);

    if(w){
        $('.walk:not(:visible)').show();
        if(!b && !d){ //w=true, b=false, d=false
            $('.bike:visible:not(.walk)').hide();
            $('.drive:visible:not(.walk)').hide();
        }else{
            if (!d) { //w=true, b=true, d=false
                $('.drive:visible:not(.bike):not(.walk)').hide();
            }else{   //w=true, b=?, d=true
                $('.drive:not(:visible):not(.walk)').show();
            }
            if (!b) {//w=true, b=false, d=true
                $('.bike:visible:not(.drive):not(.walk)').hide();
            }else{  //w=true, b=true, d=?
                $('.bike:not(:visible):not(.drive):not(.walk)').show();
            }
        }
    } else {
        if (!b && !d) { //w=false, b=false, d=false
            $('.walk:visible').hide();
            $('.bike:visible').hide();
            $('.drive:visible').hide();
        } else {
            if (!d) { //w=false, b=true, d=false
                $('.drive:visible:not(.bike)').hide();
            } else { //w=false, b=?, d=true
                $('.drive:not(:visible)').show();
                $('.walk:visible:not(.drive)').hide();
            }
            if (!b) { //w=false, b=false, d=true
                $('.bike:visible:not(.drive)').hide();
            } else { //w=false, b=true, d=?
                $('.bike:not(:visible)').show();
                $('.walk:visible:not(.bike):not(.drive)').hide();
            }
        }
    } 
}

请注意，隐藏或显示一个div JUST ONCE非常重要，只有在函数调用时才需要，因为稍后hide / show将被更改一些动画。

是否有更清洁的解决方案或某些我缺失的概念？

Answer 1

通过将按钮的相关类名存储在数组中并加入这些值来创建选择器，可以大大简化。试试这个：

$('.path-filters span').on('click',function() {
    $(this).toggleClass('active');
    updatePathTypes();
});

function updatePathTypes() { 
    var classFilter = [];
    $('#filter_walk').hasClass('active') && classFilter.push('.walk');
    $('#filter_bike').hasClass('active') && classFilter.push('.bike');
    $('#filter_drive').hasClass('active') && classFilter.push('.drive');

    $('.walk, .bike, .drive').hide(); // hide all
    $(classFilter.join()).show(); // show selected
}

Example fiddle

切换类组合的可见性

1 个答案: