Verwendung von jQuery: kein Selektor für mehr als ein Element gleichzeitig

8

Ich möchte den jquery: not-Selektor so verwenden, dass, wenn eine Menge von Elementen keine bestimmte Klasse hat, ich eine Klasse zu einer davon hinzufügen möchte.

Was ich erreichen möchte, ist: 'Wenn design-preview1, design-preview2 design-preview 3 und design-preview 4 nicht die Klasse "selected" haben, füge die Klasse "selected" zu "design-preview1" hinzu.

Ich habe das versucht, aber es funktioniert nicht:

%Vor%

Jede Hilfe wird sehr geschätzt

Neu

Dies ist mein vollständiger jQuery-Code:

%Vor%


Grundsätzlich was ich will ist, dass wenn .design-preview1, .design-preview2, .design-preview3 und .design-preview4 nicht angezeigt werden oder nicht ausgewählt sind, möchte ich .design-preview1 standardmäßig anzeigen.
Live-Link: Ссылка

    
Alex Zahir 26.04.2015, 04:44
quelle

4 Antworten

3
  

Was ich erreichen möchte, ist: wenn design-preview1, design-preview2   Design-Preview 3 und Design-Preview 4 haben keine Klasse   "selected", füge die Klasse "selected" zu "design-preview1"

hinzu

Wie in Ihrer Frage angegeben, haben Sie angegeben, dass Sie .not() verwenden möchten, um dies zu erreichen. Unten ist eine Möglichkeit, wie Sie dies über die Funktion addSelectedClassIfNotExists() tun können.

Sie können Ihre Klick-Listener auch umgestalten, sodass Sie nur eine definierte Funktion ausführen. Im Folgenden sehen Sie, wie Ihr modifizierter Code aus Ihrer Frage nach den vorgeschlagenen Änderungen aussehen könnte:

%Vor%     
boombox 26.04.2015, 05:02
quelle
9

:not ist etwas zu einfach für das, was Sie zu tun versuchen, da Sie die Klasse mehrerer Elemente ändern müssen und nicht alle auf die gleiche Weise. Also, du wirst ein paar Schritte brauchen. Unter anderem müssen Sie die Methode .filter verwenden, um zu ermitteln, ob eines Ihrer Tags die Klasse selected hat:

%Vor%

Die Standardauswahlfunktion ( doDefaultSelection ) wählt alle Elemente mit den von Ihnen angegebenen Klassen aus, wählt nur Klassen mit der Klasse selected aus und überprüft, ob noch weitere vorhanden sind. Wenn keine übereinstimmenden Elemente vorhanden sind, wird die selected -Klasse dem .design-preview1 -Element hinzugefügt.

Der Click-Handler deaktiviert die Klasse selected für alles außer dem angeklickten Element und schaltet dann die Klasse für die angeklickte Klasse um. Es setzt dann bei Bedarf den Standardwert erneut.

Demo

%Vor% %Vor% %Vor%
    
Ed Cottrell 26.04.2015 05:12
quelle
1

Wenn Sie überprüfen möchten, ob keiner von ihnen die Klasse selected hat, können Sie eine Bedingung if verwenden und die Klasse zu design-preview1

hinzufügen %Vor%

Wenn Sie überprüfen möchten, ob alle Klassen die Klasse haben,

%Vor%     
Arun P Johny 26.04.2015 04:46
quelle
1

Sie können den nicht Selektor wie folgt verwenden:

%Vor%

Was ich hier mache, ist zuerst alle Para-Elemente mit der gegebenen Klasse auszuwählen. Danach wende ich die Schleife auf das Array der zurückgegebenen Elemente an und überprüfe, ob das aktuelle Element die Klasse selected hat. Wenn es die ausgewählte Klasse nicht hat, fügen wir sonst hinzu, die wir nicht hinzufügen.

Hoffe, diese Logik hilft.

    
Ankit Tanna 26.04.2015 05:55
quelle

Tags und Links