Komplexer Filter in Jquery

Question

Ich habe eine Liste von Produkten, die ich anzeige, und ich arbeite derzeit an einer Filterfunktion, die kein Ajax verwendet.

Jedem Produkt ist eine Reihe von Klassen zugeordnet, die auf einer Kategorie basieren, in die es fällt. Also etwa so:

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

Dies bedeutet, dass viele Produkte unter dieselbe Kategorie fallen.

Dies sind die Filteroptionen:

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

Ich habe einen einfachen Filter, der es mir ermöglicht, nach einer einzigen Kategorie zu filtern, und der so aussieht:

function filterProd(filter){
$(".f_all").hide(); // first hide all products
$(".f_"+filter).show();  // show products only for this category
}

Dann die Klickfunktion:

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

Ich weiß, dass dies nicht der ideale Weg ist, um dies zu tun, aber ich bin gerade auf der Suche nach einer kleinen Anleitung.

Ich versuche, damit 2 Dinge zu erreichen:

• Wenn die Option noch einmal angeklickt wird, wird der Filter aus der Funktion entfernt.
• Wenn eine andere Option angeklickt wird, fügen Sie sie dem Filter hinzu

Ich nehme eine Funktion der Arten, die ein Array von Werten usw. akzeptiert, aber ich bin ziemlich neu in Jquery und würde jede Hilfe schätzen, die ich an dieser Stelle erhalten kann.

Answer 1

Sie benötigen so etwas wie eine globale Variable, um alle derzeit gefilterten Optionen aufzulisten. Ich werde also ein Array vorschlagen, aber das kann oder muss nicht das sein, was für Sie am besten ist. An alle Neinsager, die sagen: "Boah, globale Variablen sind scheiße", bitte ich Sie, den Sachverstand des Benutzers hier zu bewerten und die Option im Einklang mit der Benutzerfreundlichkeit der Antwort zu betrachten.

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

und verwenden Sie diese Funktion dann einfach in Ihrem Selektor wie folgt:

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

So können Sie eine Filteroption aus der Liste hinzufügen oder entfernen:

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

Answer 2

Eine Möglichkeit wäre, die Filter in einem Array zu speichern: http://jsfiddle.net/4yWWH/

EDIT: geändert, um alle Produkte anzuzeigen und zu beenden, wenn keine Filter vorhanden sind: http://jsfiddle.net/4yWWH/1/