在jquery中使用数组构建过滤器

I am currently working on a filtering system for products using jquery and I am geting slightly stuck with certain parts. I am fairly new to jquery and js so it's been quite the learning curve.

I am returning a recordset (from mysql using php) of products to a page that will list them all on load (there are only 30 all up so it's no big worry on server load etc). Using Jquery, I am hoping to create an effective filtering system to show only those products that fit into categories selected.

Here is a working example of what i have so far: http://jsfiddle.net/u3WMz/

My JS:

$("#filtered").hide();

// toggle the class on each of the different buttons
  $("#tags td.item").click(function(){
    $(this).toggleClass("item_on");
  });

var filters = [];
function filterProd(filter){
    var f = ".f_" + filter;
    if($.inArray(f, filters) > -1)
        filters = $.grep(filters, function(val) { return val != f; });
    else
        filters.push(f);

    if(filters.length == 0) {
        $(".f_all").show(); // show all products
        $("#filtered").hide(); // hide reset button
        return;
    }
    else {
      $("#filtered").show(); // show reset button
    }

    $(".f_all").hide(); // first hide all products
    $(filters.join(", ")).show();  // show products only for this category
}

$("#p_1").click(function(){filterProd("cat1");});
$("#p_2").click(function(){filterProd("cat2");});
$("#p_3").click(function(){filterProd("cat3");});
$("#p_4").click(function(){filterProd("cat4");});
$("#p_5").click(function(){filterProd("cat5");});
$("#p_6").click(function(){filterProd("cat6");});

My HTML:

<table cellspacing="10">
  <tr id="tags">
    <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>
    <td class="item" id="p_4">Category 4</td>
      <td><div id="filtered">FILTER IS ON</div></td>
  </tr>
</table>
<div id="spacer">&nbsp;</div>
<ul id="products">
     <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>
     <li class="f_all f_cat1 f_cat2 f_cat_5">Product 4</li>
     <li class="f_all f_cat1 f_cat2 f_cat5 f_cat6">Product 5</li>
 </ul>

You can see the filter works on displaying results based on which css classes are present against the product. So you click Category 1, it will display products 1, 2, 4 and 5 and so on...

My Problem

At the moment it is filtering based on an "OR" result, so if you click both categories 2 and 3, it will also show 1,2,4 and 5. What i need it to do is do more and an "AND" result where it would only show products that meet the same criteria. In this case, it should return nothing as the category doesn't exist in BOTH products. (i hope i'm making sense).

Can someone please give me an idea on the best possible way to approach this from here. I do not wish to use AJAX as eventually there will be many categories and I wish to keep server load low.

I'm pretty stuck with this, unfortunately i know little enough of jquery to work effectively just yet.

You can use this code

$(filters.join("")).show();  // show products only for this category

http://jsfiddle.net/ynhat/u3WMz/1/