So verwalten Sie CSS-Klassen mit JavaScript

Bei der Entwicklung einfacher Webprojekte, die die Benutzerinteraktion einbeziehen, wird das, wie am besten, um den Statusänderungen in CSS zu steuern, zum Nachdenken an Nahrung. Wenn der Benutzer ein Akkordeon ausdehnt oder ein Menü umgibt, wie können sich die Änderungen der CSS-Style anwendet? Eine populäre Lösung beinhaltet standardmäßige Klassen, ein Namenskonvention, das Klassennamen wie z ist aktiv oder ist erweitert als Stilhaken.

• 12 Häufige Javascript-Fragen beantwortet

Diese statistischen Klassen würden normalerweise in JavaScript verwaltet. Laden Sie die Mock-Android-App herunter und öffnen Sie das Website-Vorlage Verzeichnis in Ihrem Texteditor und Sie können das für sich selbst in sehen dev / js / main.js .

Eine Sache, die Sie hier wissen, ist, dass es viele doppelte Code-Snipps gibt, die alle sehr ähnliche Klasse auslösen. Vermutlich, wenn dieses Projekt in der Größe wachsen würde, würde dies also die Menge an Duplikaten. Ein wesentlich effizienterer Ansatz wäre stattdessen, um eine einzige JavaScript-Funktion zu schreiben, die dieselbe Aufgabe ausführt und immer wieder wiederverwendet werden kann - jedoch auf unterschiedlichen statistischen Klassen auf verschiedenen Elementen umgeschaltet werden. In diesem Tutorial erforschen wir, wie Sie genau das tun können.

So beginnen Sie in Ihrer Konsole, CD in 'Website-Template' und ausgeführt npm install. So installieren Sie die Node-Abhängigkeiten des Projekts. Wir arbeiten in der anwenden Verzeichnis von hier aus raus.

01. Verwenden von HTML5-Datenattributen

Im index.html. finde das .js-Beschreibung. Element auf Zeile 103 und fügen Sie die unteren HTML5-Datenattribute an. Wir verwenden dieses Muster, um Informationen zu speichern, wann jsdecription. Es wird geklickt, unsere wiederverwendbare Funktion wird die Klasse kennen, die wir wechseln möchten, und die Elemente, mit denen er umgeschaltet werden soll.

data-class="is-active" data-class-element ="js-description-slide, js-home-slide" 

02. Erstellen Sie Data-Class.js

In dem js. Verzeichnis, erstellen Sie eine neue Datei angerufen Data-Class.js. . Hier bauen wir unsere wiederverwendbare Funktion. Im Inneren schreiben Sie einen IIFE (sofort aufgerufene Funktionsausdruck), um unseren Code einzukapseln und dann das importieren nächstes Helfer, den wir später im Tutorial verwenden werden.

 (Funktion () {var closed parent = erfordern ("../../ node_modules / orionjs / helfs / contlestparent.js");
}) (); 

03. Greife Elemente und Schleife durch

Unter dem Helper-Import müssen wir einen Nodelist aller Elemente mit erstellen Datenklasse Attribute, da dies das einzige Attribut ist, das nicht optional ist. Als nächstes gehen wir dann mit einem Klassiker durch ZUM Schleife, damit wir auf jedes einzelne Element zugreifen können.

 var elems = dokument .queryselectorall ("[Datenklasse]"), a; für (a = 0; A & lt; elems.length; A ++) {
} 

04. Fügen Sie Click Event-Listener hinzu

Innerhalb der ZUM LOOP, Fügen Sie einen Ereignis-Listener hinzu, um auf "Click-Events anzuschauen, also wissen wir, wann der Benutzer auf das Element geklickt hat, das wir auslösen möchten, um die Klasse Toggles auszulösen (aka das Triggerelement). Rufen Sie das an ProcessChange () Funktion und bestehen Sie einen Verweis auf das angeklickte Element, das innerhalb des Umfangs der Funktion über die zugänglich ist Dies Stichwort.

 elems [a] .addeventListener ("klicken", function () {
veranstaltet (dies); }); 

05. Tastaturereignis-Listener hinzufügen

Direkt unter dem Click-Event-Listener, fügen Sie einen weiteren hinzu, um auf die Presse der eingeben Taste und dann das gleiche ausführen ProcessChange () Funktion. Wir fügen Unterstützung für Tastaturereignisse hinzu, um die Erreichbarkeit zu verbessern, indem Sie Benutzer in Betracht ziehen, die keine Zeigegeräte wie eine Maus verwenden können.

 ELEMS [A] .addeventListener ("Tastendruck", Funktion (E) {
if (e.was === 13) {e.PreventDefault (); veranstaltet (dies);
}}); 

06. Fügen Sie Mousedown Event-Hörer hinzu

Das Doppelklick auf ein Element hebt den gesamten Text oft darin hervor. Wenn wir dem Trigger-Element Logik hinzufügen, wenn diese Funktionalität angeklickt hat, ist etwas, das wir verhindern möchten. Dazu füge ein Maus nach unten Ereignislistener, um die Ereignisse anzurufen Standard verhindern() Methode und Abbrechen des Standardverhaltens.

 ELEMS [A] .addeventListener ("Mousedown", Funktion (E) {
e.PreventDefault (); }); 

07. Erstellen Sie processchange () -Funktion

Gleich nach dem. nächstes Importieren, erstellen Sie eine Funktion angerufen ProcessChange () das akzeptiert ein Element. Dies ist die gleiche Funktion, auf die in den vorherigen Schritten bezeichnet wird, und hält alle unsere Logik für die Verarbeitungsklasse auf das Zielelement.

Schnappen Sie sich innerhalb der Funktion den Inhalt der Elemente Datenklasse Attribut und in ein Array aufteilen. Dies ist, um mehrere Kommas getrennte Klassen innerhalb des einzelnen Datenattributs zu ermöglichen.

 VAR-ProcessKange = Funktion (ELEM) {VAR-DataClass = ELEM .Dataset.CLASS.Split (",");
} 

08. Data-Class-Scope-Attribut

Nächstes, in der Funktion, überprüfen Sie die Anwesenheit von a Datenklasse-Scope Attribut, falls gefunden, in ein Array wie zuvor aufgeteilt. Datenklasse-Scope ist ein optionales Attribut, mit dem Sie einschränken können, wo der Klassenschalter auftritt.

Zum Beispiel, wenn Dataclass-SCOPE. wurden eingestellt js-my-element , nur Zielelemente, die Kinder davon sind, wären von einem Klick des Triggerelements beeinflusst.

 if (elem.dataset.classscope) {var dataclassscope = elem.dataset.classscope.split (",");
} 

09. Attribut des Datenklasse-Elements

Das Datenklasse-Element Attribut ist ein weiteres optionales Attribut. Es gibt das Element an, das der Klassenknopf beeinflussen soll. Im Snippet unten prüfen wir die Anwesenheit und konvertieren, falls gefunden, den Inhalt als zuvor in ein Array umrechnen. Wenn es nicht gefunden wird, setzen wir sowohl das Zielelement als auch den Umfang auf das Trigger-Element ein, was bedeutet, dass er, wenn Sie auf klicken, die Klassenwechsel an sich auslösen.

 if (elem.dataset.ClassElement) {var dataclassElement = elem.dataset.ClassElement.Split (",");
}
else {var dataclasselement = [elem.classlist 
]; Wenn (! DataClassScope) {
VAR Dataclassscope = DataClassElement; }} 

10. SETUP-KLASSE-TOGGLE-Schleife

Weil beide Datenklasse und Datenklasse-Element akzeptieren Sie mehrere Kommas getrennte Werte, wir müssen das erklären Datumslänge Variable und weisen Sie die Länge des größten Attributs zwischen den beiden zu. Dies soll sicherstellen, dass wir genug Zeiten schließen, um sicherzustellen, dass wir kein Zielelement verpassen.

 var datalysp = math.max (dataclassElement.länge, dataclass.length), b; für (B = 0; B & LT; DataLength; B ++) {
} 

11. Reduzieren Sie die Wiederholung in Attributwerten

Es ist möglich, dass Datenattribute doppelte Werte haben. Zum Beispiel & lt; ein Data-Class = "IS-versteckt, is-verstecktes" Datenklasse-Element = "JS-ELEM, JS-ELEM2" & GT; ist eine gültige Verwendung der Funktion, es wäre viel besser, nur angeben zu müssen ist versteckt Einmal.

Dazu werden wir in der Logik hinzufügen Datumslänge ZUM Schleife, wenn a Datenklasse oder Datenklasse-Element Der Eintrag fehlt, verwenden Sie den letzten gültigen. Das heisst & lt; ein DataClass = "IS-verstecktes" Data-Class-Element = "JS-ELEM, JS-ELEM2" & GT; würde auch funktionieren.

 if (DataClass [B]! == undefined) {
var elemclass = dataclass [b]; } if (DataClassElement [b]! == undefined) {
VAR DataClassElementValue = Datenklassifizierung [B]; } 

12. Wiederholung reduzieren.

Immer noch innerhalb der. ZUM Schleife, das gleiche wieder, aber mit dem Datenklasse-Scope Attribut. Wenn wir keinen Umfang haben, verwenden Sie den letzten gültigen Gültigen. Dies ermöglicht einen Umfang, um viele Klassenklopfen zu bewirken.

 if (Dataclassscope & amp; & amp; dataclassscope [b]! == undefined) {
VAR Cachedscope = DataClassScope [B]; } else if (cachedscope) {
DataClassScope [B] = Cachedscope; } 

13. Geltungsbereich anwenden: Teil 1

Das letzte was in der ZUM Schleife, die wir tun müssen, bevor wir alles haben, was wir brauchen, um den Klassenschalter auszulösen, stellen Sie sicher, dass, wenn ein Umfang definiert ist, nur Elemente innerhalb dessen gezielt werden. Wir werden anfangen, eine bedingte Anweisung zu erstellen, die nach Geltungsdaten prüft, und wenn keiner gefunden wird, verwenden Sie einfach den globalen Dokumentenbereich.

 if (Dataclassscope & amp; & amp; dataclassscope [b]! == "false") {
}
else {var elemref = document.queryselectorall ('. $ {DataclassElementValue}'), c; } 

14. Geltungsbereich anwenden: Teil 2

Innerhalb der leeren, if-Anweisung aus dem vorherigen Schritt, fügen Sie das untenstehende Snippet hinzu. Dies findet das Element, das in definiert ist Datenklasse-Scope ( elemparent ) und erstellt dann ein Array aller kinderförmigen Elemente Datenklasse-Element ( Elemref ). Wenn die Umfangs- und Zielelemente gleich sind, wird auch deren Bezug auf die Liste der Elemente hinzugefügt, um sie zu ändern.

 var elemparent = nächstes (elem, dataclassscope [b]),
elemref = [] .slice.call (elemparent .queryselectorall ('. $ {DataclassElementValue}), c;
if (elemparent.classlist. enthält (DataClassElementValue)) {elemref.unshift (elemparent); } 

15. Schalten Sie die Klassen um

Endlich am Ende der ZUM LOOP, Lassen Sie uns die Daten verwenden, die wir aufgebaut haben, und wechseln Sie alle korrekten Klassen auf allen richtigen Elementen um. Dazu brauchen wir ein neues ZUM Schleife, um durchzugehen elemref'nodelist / array. , greifen Sie auf jede Elemente zu Klassiflober API und dann die Verwendung der Umschalten() Methode zum Hinzufügen oder Entfernen des Werts von Elemklasse .

 für (c = 0; c & lt; elemref.length; c ++) {elemref [c] .classlist.toggle (elemclass); } 

16. Fügen Sie die Funktion ein

Nun ist die Funktion abgeschlossen, dass wir es in einfügen müssen Main.js. . Kopieren Sie dazu den Snippet, unten, und fügen Sie ihn oben in der Datei hinzu, aber in der Iife Funktion. Wir brauchen auch nicht den größten Teil des Codes in Main.js. , also löschen Sie alles bis zum Stop Box Art Checkbox Event Bubble Snippet.

 erfordern ("./ data-class.js"); 

17. Zu Favoriten-Symbolen hinzufügen

Nun, um die Funktion zu verwenden. Im index.html. , finden Sie alle Instanzen des Lieblingssymbols mit einem JS-Star. Klasse. Fügen Sie das unten angegebene Attribut hinzu und wenn Sie darauf hingeklickt haben ist aktiv an sich selbst, wie in der Abwesenheit von Datenklasse-Element Das Triggerelement verwendet sich als Zielelement.