非常簡單的過濾系統？

Question

我正在嘗試構建一個基於多個屬性的極其簡單的過濾系統。

在我的例子中，我用過：

• 性別
• 高度

我希望能夠在“男/女”和“短/高”之間做出選擇。 因此，有四種可能的組合：

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

在每個過濾器組中只有兩個選項的情況下，一次只能檢查一個。

我遇到的問題是簡單的邏輯。 現在，點擊“男人”將隱藏女性。 但點擊“Tall”將只顯示“Tall”人。

我只是想知道是否有一個優雅的解決方案來構建這個基本系統？

謝謝！

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

小提琴