I have a list of events that users can filter by choosing a series of check boxes. I've attached data to each event using (I've hard-coded the true/false values to simplify):
$(thisDiv).data({
"Category": {
"Category1": true,
"Category2": false,
"Category3": true,
"Category4": true,
"Category5": false
},
"Topic": {
"Topic1" : true,
"Topic2" : false,
"Topic3" : false,
"Topic4" : true,
"Topic5" : true
}
});
When users select/deselect corresponding checkboxes I want to hide/show events based on the corresponding value, e.g if the Category1 checkbox is selected I want to select all of the events where Category1 == true. (Think like an Amazon book search where you want to filter books by an author or a genre.)
My problem is the syntax I'm using to select matches:
$(checkboxes).change(function() {
if ($(this).is(':checked')) {
var group = this.groupName; //an attribute I added to the checkbox that contains the key (e.g. "Category" or "Topic")
var identifier = this.id; //e.g. "Category1"
$(eventContainer).each(function() {
//alert($(this).data(group).identifier); //.data(group) alone returns object, but once I add .identifier it fails
if ($(this).data("Category").Category1 == true) { //works
//show/hide events based on other conditions
};
}); //end function
}
}); //end function
What is the correct syntax to select items that match the criteria?