jquery - 非常简单的过滤系统？

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);
});​

小提琴