非常简单的过滤系统？

Question

我正在尝试构建一个基于多个属性的非常简单的过滤器系统。

在我的例子中，我用：

• 性别
• 身高

我想能够之间的“男/女”和“短/高大的选择”。因此，有四种可能的组合：

• 男/短
• 男/高大
• 女/短
• 女/高大

在只有两个选择的情况下，每个过滤器组，每次只能检查一个过滤器组。

我遇到的问题是简单的逻辑。现在，点击“男人”会隐藏女人。但点击“高”将只显示“高”的人。

我只是想知道是否有一个优雅的解决方案来建立这个基本系统？

谢谢！

http://jsbin.com/ixokek/1

Answer 1

你只关心当前的过滤器设置;你不考虑其他。如果有一个能够读取所有过滤器设置的通用过滤器函数以及仅仅交换活动状态的点击处理程序，那么它可以说更加优雅：http://jsbin.com/ixokek/7/。为什么你把你的功能的变种内，而不是刚命名的功能，我

$('#filter li').click(function(){ 
    $(this).siblings().removeClass("active"); // remove active from other 
    $(this).toggleClass("active"); // toggle active on current 
    filter(); // filter elements 
}); 

var filter = function() { 
    // array of classes that items need to have 
    var classes = $("#filter li.active") 
     .map(function() { 
     return $(this).data("filter"); 
     }) 
     .toArray(); 

    $(".item").each(function() { 
    var $this = $(this); 

    // it should show if it has all classes as the settings say 
    var show = classes.every(function(aClass) { 
     return $this.hasClass(aClass); // class is a reserved word 
    }); 

    // toggle appropriately 
    if(show) { 
     $this.fadeIn(200); 
    } else { 
     $this.fadeOut(200); 
    } 
    }); 
}; 

Answer 2

$('#filter li').on('click', function(){ 
    $(this).toggleClass('active').siblings().removeClass('active'); 
    var gender = $('#filter ul').eq(0).find('.active').data('filter')||'', 
     height = $('#filter ul').eq(1).find('.active').data('filter')||'', 
     sel = '.item'+(gender!=''?'.'+gender:'')+(height!=''?'.'+height:''); 
    $(sel).fadeIn(200) 
    $('.item').not(sel).fadeOut(200); 
});​ 

FIDDLE