Question

I am trying to build an extremely simple filter system that is based on multiple attributes.

In the case of my example, I used:

• Gender
• Height

I would like to be able to choose between ‘Male/Female’ and ‘Short/Tall’. So, there are four possible combinations:

• Male/Short
• Male/Tall
• Female/Short
• Female/Tall

In the case of having only two choices in each filter group, only one can be checked at a time.

The problem I am running into is the simple logic. Right now, clicking ‘Men’ will hide the women. But clicking ‘Tall’ will show only the ‘Tall’ people.

I’m just wondering if there is an elegant solution to building this basic system?

Thank you!

http://jsbin.com/ixokek/1

Answer 1

You only care for the current filter setting; you do not take the other into account. It would be arguably more elegant if there is a common filter function that reads all filter settings, and a click handler that merely swaps the active state: 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);
    }
  });
};