非常简单的过滤系统？

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