complex filter in jquery

I have a list of products I am displaying and I am currently working on a filtering function that does not use ajax.

Every product has a series of classes attached to it based on a category it falls under. So like this:

<li class="f_all f_cat1 f_cat2">Product 1</li>
<li class="f_all f_cat1 f_cat3 f_cat_4">Product 2</li>
<li class="f_all f_cat4 f_cat5 f_cat6">Product 3</li>

This means that many products fall under the same category.

These are the filter options:

<table cellspacing="10">
  <tr>
    <td class="item" id="p_1">Category 1</td>
    <td class="item" id="p_2">Category 2</td>
    <td class="item" id="p_3">Category 3</td>
  </tr>
</table>

I have a basic filter working so far, that allows me to filter based on a single category, that looks like this:

function filterProd(filter){
$(".f_al开发者_StackOverflow社区l").hide(); // first hide all products
$(".f_"+filter).show();  // show products only for this category
}

Then the click function:

$("#p_1").click(function(){filterProd("cat1");});
$("#p_2").click(function(){filterProd("cat2");});
$("#p_3").click(function(){filterProd("cat3");});

I know that this is not the ideal way to do this but i'm just looking for a little guidance.

I am trying to achieve 2 things after this:

I am assuming a function of sorts that accepts an array of values etc, but i'm fairly new to jquery and would appreciate any help i can get at this point.

One option would be to store the filters in an array: http://jsfiddle.net/4yWWH/

EDIT: modified to show all products and exit if there are no filters: http://jsfiddle.net/4yWWH/1/

You'll need something like a global variable to list all the currently filtered options. So I'm going to suggest an array, but this may or may not be what is best for you. To all the naysayers going "booo, global variables suck" I ask you to evaluate the expertness of the user here and consider the option in keeping with the usability of the answer.

var options = { 'cat1':false,'cat2':true,'cat3':false,'cat4':false,'cat5':false} //you can figure this out on your own.
function GetFilterValues(){
  var returnFilter = '';
  for(key in options) {
    if (options[key]) { //this checks to see if the value is true
      returnFilter = returnFilter + '.f_' + key + ' ,';
    }
  }
  //remove the last comma
  if (returnFilter.substring(returnFilter.length - 1) == ',') returnFilter = returnFilter.substring( 0, returnFilter.length - 1 );
  return returnFilter;
}

and then just use this function in your selector like so:

function filterProd(filter){
  $(".f_all").hide(); // first hide all products
  $(GetFilterValues()).show();  // show only selected categories.
}

For adding and removing a filter option from the list, try this:

function toggleOptionsValue(key){
  options[key] = !options[key];
}