комплексный фильтр в 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];
}