Mehrere Daten-Attribut-Filterung mit Eingabe-Kontrollkästchen

Question

Ich möchte eine jQuery-Funktion, die eine Reihe von data-attributes filtert.

In meiner HTML-Struktur habe ich eine Reihe von Listenelementen und gibt Attribute sind:

data-offer und data-subcat diese beiden die Einzelteile mit mehreren Eingangskontrollkästchen, um herauszufiltern, verwendet werden.

Bisher habe ich diese jQuery, die Filtration durchführt aber nicht so, wie ich es möchte.

$(".cs-widget-content").on("change", "input[type=checkbox]", function() { 
    $(".five-column > li.column").hide(); 
    $(".cs-widget-content").find("input:checked").each(function (i, el) { 
     $(".five-column > li.column").filter('[data-offer="' + el.id + '"]').show(); 
    }); 

    $(".cs-widget-content").find("input:checked").each(function (j, el) { 
     $(".five-column > li.column").filter('[data-subcat="' + el.id + '"]').show(); 
    }); 

}); 

Hier ist die JSFiddle

Lösung Ich möchte:

1. Alle Daten sollten Last auf Seite Last sein (was funktioniert).

2. Die Eingänge Filter für beide Datenattribute sollten zusammenarbeiten (beispielsweise, wenn ein Eingang für data-offer geprüft wird, dass Daten zeigen, und wenn die data-subcat es wird sich zeigen, die Daten für dieses Attribut in der ebenfalls überprüft wird, previous geprüft von data-offer.

3. Wenn eines des Eingangs nicht aktiviert ist, sollten die Daten sichtbar wieder.

sich auf Ihre Hilfe suchen.

Danke

Answer 1

Iterieren Sie durch die Produkte statt die Filter und entscheiden Sie für jeden, ob es angezeigt werden soll.

var filter1HasChecked = $("[data-filter=1]:checked").length; 
var filter2HasChecked = $("[data-filter=2]:checked").length; 

$("ul.products li").each(function(i,v){ 
    var $this = $(this); 

    if((!filter1HasChecked || $("#" + $this.data("offer")).is(":checked")) 
     && (!filter2HasChecked || $("#" + $this.data("subcat")).is(":checked"))){ 
     $this.show(); 
    }   
}); 

http://jsfiddle.net/Curt/k62kxm0x/4/

würde diese Art von Betrieb mit 100s von Gegenständen teuer werden, aber dann würde ich eine serverseitige Filterung mit AJAX oder vielleicht Implementierung eines Front-End-Rahmen wie AngularJS vorschlagen.