Eine intelligente Umschaltklasse in jQuery

Sie können das Datenattribut für das Element verwenden, auf das mit

In Ihrer Methode ist nur eine kleine Änderung erforderlich.

kann durch

Hoffe das löst es für dich.

Aktualisierung:

Es gibt eine Sache, die du verstehen musst. Wenn Sie zwei verschiedene Verhaltensweisen verwenden möchten, müssen Sie nicht zwei verschiedene Klassen für die Verhaltensänderung verwenden . Eins ist genug, weil Sie das Verhalten basierend auf der Klasse auf oder aus ändern können.

Nehmen wir an, ich möchte, dass mein Element in einer bestimmten Weise ein rotes Hover-Ereignis hat. Und möchte, dass es einen blauen Hover-Event mit CSS in umgekehrter Richtung gibt. Dann ist dies der richtige Weg:

JSFiddle Demo

Hier verwenden wir eine Schaltfläche, um alle Divs umzuschalten und ihr CSS-Verhalten zu ändern, sieht jetzt einfach aus, oder?

Wenn Sie jedoch auch Javascript / jQuery-Ereignisse aktivieren müssen, ist dies nicht möglich. In diesem Fall müssen Sie 3 andere Methoden verwenden, um dies zu verwalten; .on() , .off() und .hasClass() .

JSFiddle Demo 2

Wie Sie sehen können, haben wir eine if-Anweisung hinzugefügt. Wenn das Element die Klasse .active hat, drehen wir .off() die .click() . Und wenn es keine aktive Klasse gibt, drehen wir .click() .on() . Unter der if-Anweisung schalten wir immer die .active -Klasse ein. Das muss also nicht in der if-Anweisung stehen.

Ich hoffe, das macht alles für euch klar, viel Glück!

Alte Antwort:

Es ist besser hier .toggleClass() zu verwenden.

Verwenden Sie eine erste Klasse für das Element für die Standardeigenschaften und eine zweite wie .active für die Interaktion.

Durch Verwendung von .on('click', function(){}) bind können Sie außerdem eine Interaktion hinzufügen, die sofort gebunden wird, sobald das Element umgeschaltet wird.

Hier ist eine Geige: Ссылка

Ich habe ein kleines jQuery-Plugin dafür. Entfernt die aktuelle Smart-Klasse (falls vorhanden) und fügt die neue Smart-Klasse hinzu. Ohne Aufruf des Parameters className wird die aktuelle Smart-Klasse nur entfernt.

verwende es wie jede andere jQuery-Methode:

NEUE, EINFACHERE ANTWORT Funktioniert ähnlich wie zuvor, mit 2 Ergänzungen: 1.) funktioniert, wenn es keine Klasse zu Beginn gibt und 2.) funktioniert, wenn andere Funktionen die Elementklasse zwischen Aufrufen ändern. Ich änderte auch den Funktionsnamen, so dass es nicht in jQuerys native toggleClass eingreift.

aktualisierte Geige: Ссылка

ALTE ANTWORT Ich würde vorschlagen, die ursprüngliche Klasse im Elementdatenattribut zu speichern. Dann kann Ihre Funktion prüfen, ob diese Daten gesetzt sind, und wenn dies der Fall ist, löschen Sie die Elementklasse, indem Sie die ursprüngliche Klasse aus den Elementdaten und auch die neue Klasse, die Sie in der Funktion übergeben haben, hinzufügen.

Wenn keine Daten festgelegt sind, speichert die Funktion die aktuelle Klasse bei der ersten Ausführung als Daten.

Sieh dir diese Geige für ein funktionierendes Beispiel mit Kommentaren an: Ссылка

Hier ist der Code. Es ist eine jquery-Funktion, so dass es für jedes Element aufgerufen werden kann (und auch verkettbar ist!)

Hoffe, das hilft!

Macht das Ihre Arbeit?

Benutze einfach hasClass . Aber Sie müssen der Funktion mitteilen, welche beide Klassen sind:

Demo - Ссылка (Schau dir die Konsole an, um zu sehen, was sie bei jedem Durchgang macht)

Das sollte tun, was Sie wollen, aber als @ T.J. Crowder sagte, es sei eher fragil und gehe davon aus, dass die Klasse, die du entfernen willst, die letzte auf dem Element ist.

oder die andere Variante:

In dieser Implementierung müssen Sie einen Verweis auf diese Instanz von fancytoggle behalten.

für Ihr Beispiel würde der Code ungefähr so ​​aussehen.

, um es in Aktion zu sehen, beziehen Sie sich auf Ссылка