How do I show/hide elements using jQuery when there are two intersecting principles governing if they are to be visible or not?

I have a web page that contains a set of elements that are marked with metadata using HTML5's "data-" tag. Each element represents a specific course or program at a school. Here's an example of what the set of elements can look like:

<div class="courseBox" data-type="course" data-location="campus">info about this particular course</div>

<div class="courseBox" data-type="program" data-location="campus">info about this particular course</div>

<div class="courseBox" data-type="course" data-location="distance">info about this particular course</div>

<div class="courseBox" data-type="program" data-location="distance">info about this particular course</div>

As you can see each element is either a course (short single course) or a program (a full education that spans over several years). Furthermore, 开发者_运维百科each element is eithar campus (on campus) or distance (distance learning).

In the interface for this page the user has four buttons that can either be on/true or off/false. The four buttons are:

Course | Program | Campus | Distance

When the page loads all four buttons are on/true since the page displays all courses and programs, both on campus and distance learning.

When the user clicks one of the buttons, I want to use jQuery to hide all the elements that no longer match the criteria; in other words: a filter.

At first this seemed like an easy task. Just write something along the lines of:

$("#courseButton").toggle(function(){
   $("courseBox[data-type='course']").hide();
},
function(){
   $("courseBox[data-type='course']").show();
});

This works fine as long as the two different ways of categorizing the elements don't collide. But consider this case:

1. The user first clicks the "Course" button, which hides all the courses (marked "courses").

2. Then clicks the "Distance" button which hides all elements marked "distance".

3. The user then clicks the "Course" button again, which will show all element marked with "courses" including those that are marked "distance", despite the fact that they are supposed to be hidden.

My question now is: how do I create a filter function using jQuery that will function properly eventhough there are two different (intersecting) ways of categorizing the elements?

Thanks in advance!

/Thomas Kahn

Actually, your situation is a bit trickier. You have two groups, type and location. You need the intersection of type and location.

This means selecting all of the items of the selected type(s) and then filtering out all of the ones that are not of selected distance(s) or vice versa.

Here is an example:

$(".button").click(function() {
    $(this).toggleClass('selected');

    $(".courseBox").hide();

    var datatypes = $(".courseBox");

    $(".button.datatype").not('.selected').each(function() {
        var selClass = $(this).attr('id').replace('Button', '');

        datatypes = datatypes.filter(".courseBox[data-type!='" + selClass + "']");
    });

    $(".button.selected.datalocation").each(function() {
        var selClass = $(this).attr('id').replace('Button', '');

        datatypes.filter(".courseBox[data-location='" + selClass + "']").show();
    });
});

http://jsfiddle.net/jtbowden/qjpctye4/

I actually start with all items, remove any that are of a type that is not selected, and then only show those which are of a distance selected.

$(".button").click(function() {
  $(this).toggleClass('selected');

  $(".courseBox").hide();

  var datatypes = $(".courseBox");

  $(".button.datatype").not('.selected').each(function() {
    var selClass = $(this).attr('id').replace('Button', '');

    datatypes = datatypes.filter(".courseBox[data-type!='" + selClass + "']");
  });

  $(".button.selected.datalocation").each(function() {
    var selClass = $(this).attr('id').replace('Button', '');

    datatypes.filter(".courseBox[data-location='" + selClass + "']").show();
  });
});

.button {
  border: 1px solid black;
  padding: 2px;
  margin: 4px;
  float: left;
  cursor: default;
}
.courseBox {
  clear: both;
  background-color: lightBlue;
  margin: 3px;
}
.selected {
  background-color: lightGreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="button selected datatype" id="courseButton">Courses</div>
<div class="button selected datatype" id="programButton">Programs</div>
<div class="button selected datalocation" id="distanceButton">Distance</div>
<div class="button selected datalocation" id="campusButton">Campus</div>

<div class="courseBox" data-type="course" data-location="campus">Course Campus</div>

<div class="courseBox" data-type="program" data-location="campus">Program Campus</div>

<div class="courseBox" data-type="course" data-location="distance">Course Distance</div>

<div class="courseBox" data-type="program" data-location="distance">Program Distance</div>

Build a complete selector each time based on all four inputs.

Something like this:

var selector = '';
$('input:checkbox').each(function(){
    if (this.checked){
        selector += '[data-type="' + this.id +'"], '; // assuming checkbox.id =  Course|Program|Campus|Distance
    }
});

selector = selector.substring(0, selector.length-1); // kill trailing ' ,'

var all = $('.courseBox'),
    toShow = all.filter(selector),
    toHide = all.not(toShow);

toShow.show();
toHide.hide();

I think it will be the best sollution to use controller which keeps business logic of showing and hiding objects. Then just use methods of this controller to toggle model state and always call the same method to update visibility of elements. Here is possible solution:

var someController = (function(){
    var model = {
        showCourse: true,
        showProgram: true,
        showCampus:true,
        showDistance: true
    }

    var _UpdateView = function(){
        $(".courseBox[data-type='course']").filter(".courseBox[data-location='campus']").toggle(model.showCourse && model.showCampus);
        $(".courseBox[data-type='program']").filter(".courseBox[data-location='campus']").toggle(model.showProgram && model.showCampus);
        $(".courseBox[data-type='course']").filter(".courseBox[data-location='distance']").toggle(model.showCourse && model.showDistance);
        $(".courseBox[data-type='program']").filter(".courseBox[data-location='distance']").toggle(model.showProgram && model.showDistance);
    };

    var _toggleCourse = function(){
        model.showCourse = !model.showCourse;
        _UpdateView();
    };

    var _toggleProgram = function(){
        model.showProgram = !model.showProgram;
        _UpdateView();
    };

    var _toggleCampus = function(){
        model.showCampus = !model.showCampus;
        _UpdateView();
    };

    var _toggleDistance = function(){
        model.showDistance = !model.showDistance;
        _UpdateView();
    };


    return {
        toggleCourse: function(){_toggleCourse();},
        toggleProgram: function(){_toggleProgram();},
        toggleCampus: function(){_toggleCampus();},
        toggleDistance: function(){_toggleDistance();}
    }
})();

Then on the page you can use buttons like this:

<input type='button' value='Course' onclick='someController.toggleCourse();' />
<input type='button' value='Program' onclick='someController.toggleProgram();' />
<input type='button' value='Campus' onclick='someController.toggleCampus();' />
<input type='button' value='Distance' onclick='someController.toggleDistance();' />