jQuery中的复杂过滤器

Question

我有一个我正在展示的产品列表，我目前正在研究一个不使用 ajax 的过滤功能。

每个产品都有一系列基于其所属类别的类别。像这样：

<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>

这意味着许多产品属于同一类别。

这些是过滤器选项：

<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>

到目前为止，我有一个基本的过滤器，它允许我基于单个类别进行过滤，如下所示：

function filterProd(filter){
$(".f_all").hide(); // first hide all products
$(".f_"+filter).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");});

我知道这不是理想的方法，但我只是在寻找一些指导。

在此之后我试图实现两件事：

再次单击该选项时，从函数中删除该过滤器

单击另一个选项时，将其添加到过滤器中

我假设一个接受值数组等的排序函数，但我对 jquery 还很陌生，希望能得到任何帮助。

Answer 1

一种选择是将过滤器存储在一个数组中：http://jsfiddle.net/4yWWH/

编辑：修改为显示所有产品并在没有过滤器时退出：http://jsfiddle.net/4yWWH/1/

Answer 2

您需要一个全局变量之类的东西来列出所有当前过滤的选项。所以我会建议一个数组，但这可能对你来说是最好的，也可能不是。对于所有反对“嘘，全局变量糟透了”的反对者，我请您在这里评估用户的专业性，并考虑与答案的可用性保持一致的选项。

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;
}

然后像这样在你的选择器中使用这个函数：

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

要从列表中添加和删除过滤器选项，请尝试以下操作：

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