Wenn jemand einen besseren Titel dafür finden kann, zögern Sie bitte nicht, es zu ändern.
Ich bin ziemlich neu in jQuery und bin auf ein Problem mit Filterelementen gestoßen.
Ich filtere DIVS mit dem Attribut data- über eine checkbox mit der Änderungsfunktion.
Mein Problem ist, dass wenn ich ein data Attribut ( colour ) filtere und ich dann nach einem anderen Attribut ( brand ) suche, die Elemente alle ausgeblendet sind. Wenn ich jedoch einen der Filter lösche, werden die Elemente wieder geöffnet, obwohl sie immer noch von einem anderen Attribut gefiltert werden.
Kann ich das irgendwie verhindern?
Hier ist der Code.
%Vor%Um das Problem zu replizieren, deaktivieren Sie das Kontrollkästchen nike, deaktivieren Sie das blaue Kontrollkästchen und kreuzen Sie erneut an. Das Element wird wieder ausgeblendet, was das Problem ist.
Hier ist die JSFIDDLE
Das hört sich wahrscheinlich nicht nach der besten Erklärung an, aber ich habe es so gut wie möglich. Sie werden es verstehen, wenn Sie mit der Geige spielen.
Eine sehr späte Ergänzung, hatte aber eine im Gange offene Geige im Hintergrund. Nach einem Brief der Aktionsgruppe "Vergessene Geige" habe ich mich entschieden, sie doch zu posten.
Da das Ziel darin besteht, Daten in Bezug auf nicht markierte Felder auszublenden, anstatt Daten anzuzeigen, für die ein Datenattribut geprüft wurde, könnten Sie eine Blacklist erstellen, für die Datenelemente ausgeblendet werden sollen.
Wie in anderen Antworten erwähnt, würde ich es vorziehen, alle Metadaten in (Daten) -Tags zu speichern, zB <input type="checkbox" data-type="colour" data-value="Blue" checked> , aber anstatt separate Filter zu erstellen, erstellen Sie einen kombinierten Filter der Elemente, die ausgeblendet werden sollen. Da jquery einfach Elementattribute auswählen kann, kann die jquery-Funktion verwendet werden, um die Filterung für Sie durchzuführen.
Die Idee ist, dass durch das Bestimmen der Filter so ein beliebiges neues Datenattribut hinzugefügt werden kann (wie zum Beispiel die Größe, die ich mir erlaubt habe, auch die Geige hinzuzufügen).
%Vor% Der unten stehende Code funktioniert sowohl für Multi-Marken als auch für Multi-Farben, indem wir ein getrenntes Filter-Array für Marken und Farben verwenden. Wenn der Filter aktiviert ist, fügen wir das entsprechende Filter-Array hinzu div und überprüfe, ob es sowohl die Marken- als auch die Farbschlüsselwörter hat. Wenn beide übereinstimmen, zeigen wir (*) , andernfalls verstecken wir (*) es:
EDIT 1:
Falls Sie alle Kontrollkästchen deaktivieren möchten, erzeugen wir eine Funktion checkFilters() , die die gesamte Logik enthält und wir rufen sie auf, sobald die Seite geladen wird, sowie jedes Mal, wenn einer der Kontrollkästchen geändert wird , wie in diesem JS Fiddle 2 gezeigt.
EDIT 2:
Der JavaScript-Code hat immer noch redundanten Code und dies ist nur für 3 Checkboxen, vorausgesetzt, es gibt 10 Marken und Sie haben 5 Farben für jede Marke, dann würde der Code chaotisch und wiederholt mit mehr Chancen für Bugs aussehen, um den Code mehr zu machen robust, flexibel und auch viel kürzer, fügen wir jedem checkbox data-type und data-keyword hinzu und abhängig vom Wert des data-type -Attributs geben wir das entsprechende Array zurück und schieben den Wert des data-keyword -Attributs in das entsprechende Array, so dass es funktioniert, egal wie viele Farben oder Marken-Checkboxen es gibt, genau wie in dieser JS Fiddle 3
Eingabebeispiel :
%Vor%JS:
%Vor% * Beachten Sie, dass jQuery .show() " ungefähr entspricht ruft .css( "display", "block") "auf, während .hide() " ungefähr dem Aufruf von .css( "display", "none") entspricht "
Sie können jQuery verwenden, um den geprüften Elementen ein data-selected -Attribut hinzuzufügen. Ich gehe davon aus, dass die Elemente nicht standardmäßig ausgewählt sind. Wenn Sie die Eigenschaft attr für die ausgewählten divs verwenden, können Sie ein solches Attribut hinzufügen. Um sicherzustellen, dass nur gefilterte Selektoren angezeigt werden, wenn Sie auf das Kontrollkästchen Nike klicken, möchten Sie dem Selektor für dieses Check-Ereignis ein Datenattribut hinzufügen, indem Sie es in $("div[data-brand=Nike][data-select=true]") umwandeln. Der Kürze halber können Sie die Eigenschaften attr und css zusammen verketten.
Tags und Links javascript jquery