Question

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

就我的例子而言，我使用了：

性别
高度

我希望能够在“男/女”和“短/高”之间做出选择。因此，有四种可能的组合：

男性/短
男性/高层
女性/短
女性/高层

如果每个过滤器组中只有两个选项，则一次只能检查一个。

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

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

谢谢！

http://jsbin.com/ixokek/1

Answer 1

您只关心当前的过滤器设置;你不考虑对方。如果有一个读取所有过滤器设置的通用过滤器功能，以及一个仅交换活动状态的点击处理程序，那么它可能会更优雅。{/ 3}}。

$('#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

非常简单的过滤系统？

2 个答案: