So verwalten Sie CSS-Klassen mit JavaScript
Bei der Entwicklung einfacher Webprojekte mit Benutzerinteraktion wird die Frage, wie Statusänderungen in CSS am besten verwaltet werden können, zum Nachdenken angeregt. Wie sollten die Änderungen des CSS-Stils angewendet werden, wenn der Benutzer ein Akkordeon erweitert oder ein Menü umschaltet? Eine beliebte Lösung sind Stateful-Klassen, eine Namenskonvention, die Klassennamen wie verwendet ist aktiv oder wird erweitert als Stilhaken.
Diese statusbehafteten Klassen werden normalerweise in JavaScript verwaltet. Laden Sie die nachgebildete Android App herunter und öffnen Sie die Website-Vorlage Verzeichnis in Ihrem Texteditor und Sie können dies selbst in sehen dev / js / main.js .
Eine Sache, die Sie hier möglicherweise bemerken, ist, dass es viele doppelte Codefragmente gibt, die alle sehr ähnliche Klassenumschaltungen auslösen. Wenn dieses Projekt an Größe zunehmen würde, würde sich vermutlich auch die Anzahl der Duplikate erhöhen. Ein viel effizienterer Ansatz wäre stattdessen, eine einzelne JavaScript-Funktion zu schreiben, die dieselbe Aufgabe ausführt und immer wieder verwendet werden kann - aber verschiedene Stateful-Klassen für verschiedene Elemente umschaltet. In diesem Tutorial erfahren Sie, wie Sie genau das tun.
Um zu beginnen, cd in Ihrer Konsole in 'Website-Vorlage' und führen Sie npm installieren um die Knotenabhängigkeiten des Projekts zu installieren. Wir werden in der arbeiten dev Verzeichnis von hier an aus.
01. Verwenden von HTML5-Datenattributen
Im index.html , finde die .js-Beschreibung Element in Zeile 103 und fügen Sie die folgenden HTML5-Datenattribute hinzu. Wir werden dieses Muster verwenden, um Informationen zu speichern, also wann Beschreibung Wenn Sie darauf klicken, kennt unsere wiederverwendbare Funktion die Klasse, die umgeschaltet werden soll, und die Elemente, auf die 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 mit dem Namen data-class.js . Hier bauen wir unsere wiederverwendbare Funktion auf. Schreiben Sie innerhalb einen IIFE (sofort aufgerufenen Funktionsausdruck), um unseren Code zu kapseln, und importieren Sie dann den am nächstenParent Helfer, den wir später im Tutorial verwenden werden.
(function(){ var closestParent = require('../../node_modules/orionjs/helpers/closestParent.js'); })();03. Greifen Sie nach Elementen und durchlaufen Sie sie
Unterhalb des Hilfsimports müssen wir eine NodeList aller Elemente mit erstellen Datenklasse Attribute, da dies das einzige Attribut ist, das nicht optional ist. Als nächstes werden wir sie dann mit einem Klassiker durchlaufen ZUM Schleife, damit wir auf jedes einzelne Element zugreifen können.
var elems = document .querySelectorAll('[data-class]'), a; for(a = 0; a < elems.length; a++){ } 04. Klickereignis-Listener hinzufügen
Innerhalb der ZUM Fügen Sie in einer Schleife einen Ereignis-Listener hinzu, um nach Klickereignissen zu suchen, damit wir wissen, wann der Benutzer auf das Element geklickt hat, das die Klassenumschaltungen auslösen soll (auch als Triggerelement bezeichnet). Rufen Sie darin die processChange () Funktion und übergeben Sie einen Verweis auf das angeklickte Element, auf das im Rahmen der Funktion über die zugegriffen werden kann Dies Stichwort.
elems[a] .addEventListener('click', function(){ processChange(this); }); 05. Tastaturereignis-Listener hinzufügen
Fügen Sie direkt unter dem Listener für Klickereignisse einen weiteren hinzu, um auf die Presse des zu achten eingeben Schlüssel und dann das gleiche ausführen processChange () Funktion. Wir fügen Unterstützung für Tastaturereignisse hinzu, um die Zugänglichkeit zu verbessern, indem wir Benutzer berücksichtigen, die keine Zeigegeräte wie eine Maus verwenden können.
elems[a] .addEventListener('keypress', function(e){ if(e.which === 13) { e.preventDefault(); processChange(this); } });06. Mousedown-Ereignis-Listener hinzufügen
Durch Doppelklicken auf ein Element wird häufig der gesamte darin enthaltene Text hervorgehoben. Wenn wir dem Triggerelement beim Klicken Logik hinzufügen, möchten wir diese Funktionalität verhindern. Fügen Sie dazu a hinzu Maus nach unten Ereignis-Listener zum Aufrufen der Ereignisse Standard verhindern() Methode und Standardverhalten abbrechen.
elems[a].addEventListener ('mousedown', function(e){ e.preventDefault(); }); 07. Erstellen Sie die Funktion processChange ()
Kurz nach dem am nächstenParent importieren, erstellen Sie eine Funktion namens processChange () welches ein Element akzeptiert. Dies ist dieselbe Funktion, auf die in den vorherigen Schritten verwiesen wurde, und enthält alle unsere Logik zum Verarbeiten von Klassenumschaltungen für das Zielelement.
Erfassen Sie innerhalb der Funktion den Inhalt der Elemente Datenklasse Attribut und in ein Array aufgeteilt. Dies ermöglicht mehrere durch Kommas getrennte Klassen innerhalb des einzelnen Datenattributs.
var processChange = function(elem){ var dataClass = elem .dataset.class.split(', '); } 08. Datenklassenbereichsattribut
Überprüfen Sie anschließend innerhalb der Funktion, ob a vorhanden ist Datenklassenbereich Wenn das Attribut gefunden wird, wird es wie zuvor in ein Array aufgeteilt. Datenklassenbereich ist ein optionales Attribut, mit dem Sie festlegen können, wo das Umschalten der Klasse erfolgen soll.
Zum Beispiel, wenn Datenklassenbereich wurden eingestellt js-my-element Nur Zielelemente, die untergeordnet sind, wären von einem Klick auf das Triggerelement betroffen.
if(elem.dataset.classScope) { var dataClassScope = elem.dataset.classScope.split(', '); } 09. Datenklassenelementattribut
Das Datenklassenelement Attribut ist ein weiteres optionales Attribut. Es gibt das Element an, auf das sich das Umschalten der Klasse auswirken soll. Im folgenden Snippet überprüfen wir das Vorhandensein und konvertieren den Inhalt, falls vorhanden, wie zuvor in ein Array. Wenn es nicht gefunden wird, setzen wir sowohl das Zielelement als auch den Bereich auf das Triggerelement. Wenn Sie also darauf klicken, wird die Klassenänderung für sich selbst ausgelöst.
if(elem.dataset.classElement) { var dataClassElement = elem.dataset.classElement.split(', '); } else { var dataClassElement = [elem.classList[0]]; if(!dataClassScope) { var dataClassScope = dataClassElement; } } 10. Einrichten der Klassenumschaltschleife
Weil beides Datenklasse und Datenklassenelement Akzeptieren Sie mehrere durch Kommas getrennte Werte. Wir müssen die deklarieren dataLength Variable und weisen Sie ihm die Länge des größten Attributs zwischen den beiden zu. Dies soll sicherstellen, dass wir genügend Zeit durchlaufen, um sicherzustellen, dass wir kein Zielelement verpassen.
var dataLength = Math.max (dataClassElement.length, dataClass.length), b; for(b = 0; b < dataLength; b++) { } 11. Reduzieren Sie die Wiederholung von Attributwerten
Es ist möglich, dass Datenattribute doppelte Werte haben. Zum Beispiel während Ist eine gültige Verwendung der Funktion, wäre es viel besser, nur angeben zu müssen ist versteckt Einmal.
Dazu fügen wir Logik in die dataLength ZUM Schleife, wenn a Datenklasse oder Datenklassenelement Eintrag fehlt, verwenden Sie den letzten gültigen. Das heisst würde auch funktionieren.
if(dataClass[b] !== undefined) { var elemClass = dataClass[b]; } if(dataClassElement[b] !== undefined) { var dataClassElementValue = dataClassElement[b]; } 12. Reduzieren Sie die Wiederholung
Immer noch in der ZUM Schleife, das gleiche nochmal, aber mit dem Datenklassenbereich Attribut. Wenn wir keinen Bereich haben, verwenden Sie den letzten gültigen. Dadurch kann ein Bereich viele Klassenumschaltungen bewirken.
if(dataClassScope && dataClassScope[b] !== undefined) { var cachedScope = dataClassScope[b]; } else if(cachedScope) { dataClassScope[b] = cachedScope; } 13. Anwendungsbereich anwenden: Teil 1
Das Letzte in der ZUM Wir müssen eine Schleife ausführen, bevor wir alles haben, was wir zum Auslösen des Klassenwechsels benötigen. Stellen Sie sicher, dass bei der Definition eines Bereichs nur Elemente in diesem Bereich als Ziel ausgewählt werden. Zunächst erstellen wir eine bedingte Anweisung, die nach Bereichsdaten sucht. Wenn keine gefunden wird, verwenden Sie einfach den globalen Dokumentbereich.
if(dataClassScope && dataClassScope[b] !== 'false') { } else { var elemRef = document.querySelectorAll ('.${dataClassElementValue}'), c; } 14. Anwendungsbereich anwenden: Teil 2
Fügen Sie in der leeren if-Anweisung aus dem vorherigen Schritt das folgende Snippet hinzu. Dies findet das in definierte Element Datenklassenbereich ( elemParent ) und erstellt dann ein Array aller übereinstimmenden untergeordneten Elemente Datenklassenelement ( elemRef ). Wenn der Bereich und die Zielelemente identisch sind, wird der Verweis auch zur Liste der zu ändernden Elemente hinzugefügt.
var elemParent = closestParent (elem, dataClassScope[b]), elemRef = [].slice.call(elemParent .querySelectorAll ('.${dataClassElementValue}')), c; if(elemParent.classList. contains(dataClassElementValue)) { elemRef.unshift(elemParent); }15. Schalten Sie die Klassen um
Endlich am Ende des ZUM Schleife, lassen Sie uns die Daten verwenden, die wir aufgebaut haben, und alle richtigen Klassen für alle richtigen Elemente umschalten. Dazu brauchen wir eine neue ZUM Schleife, um durch die zu gehen elemRef'nodeList / array , greifen Sie auf jedes Element zu classList API und verwenden Sie dann die Umschalten() Methode zum Hinzufügen oder Entfernen des Werts von elemClass .
for(c = 0; c < elemRef.length; c++) { elemRef[c].classList.toggle(elemClass); }16. Schließen Sie die Funktion ein
Jetzt ist die Funktion abgeschlossen, in die wir sie aufnehmen müssen main.js . Kopieren Sie dazu das folgende Snippet und fügen Sie es oben in die Datei ein, jedoch innerhalb der IIFE Funktion. Wir brauchen auch nicht den größten Teil des Codes in main.js , also alles löschen bis zum STOP BOX ART CHECKBOX EVENT BUBBLE Ausschnitt.
require('./data-class.js'); 17. Zu den Lieblingssymbolen hinzufügen
Verwenden Sie nun die Funktion. Im index.html , finden Sie alle Instanzen des Lieblingssymbols mit a js-star Klasse. Fügen Sie das unten stehende Attribut hinzu, und wenn Sie darauf klicken, sollte es hinzugefügt werden ist aktiv zu sich selbst, wie in Abwesenheit von Datenklassenelement verwendet das Triggerelement sich selbst als Zielelement.
data-class='is-active' 18. Zum Spiel hinzufügen
Als nächstes müssen wir die Spielbox-Künste auf der Home-Folie verknüpfen. ist aktiv wird der richtigen Videospielfolie hinzugefügt und gleichzeitig von der aktuellen Heimfolie entfernt. Unten finden Sie die Attribute, die Sie dem hinzufügen sollten js-test-game-1 img. Die anderen folgen dem gleichen Muster, ersetzen Sie einfach das Testspiel-1 mit dem neuen Spieltitel.
data-class='is-active' data-class-element= 'js-test-game1--slide-slide, js-home-slide'19. Zum Box-Art-Umschalter hinzufügen
Auf jeder Spielrutsche befindet sich ein Schalter, der die Vorder- und Rückseite der Box umschaltet. Fügen Sie das Snippet zu jeder Instanz von hinzu, damit dies funktioniert js-boxart-toggle . Beim Klicken passieren eine Reihe von Dingen: wird umgedreht ist eingeschaltet js-boxart für die Eltern bestimmt js-slide , während wird geprüft wird am Triggerelement umgeschaltet.
data-class='is-flipped, is-checked' data-class-element='js-boxart, js-boxart-toggle' data-class-scope='js-slide, js-boxart-toggle' 20. Fügen Sie den hinteren Pfeilen hinzu
Schließlich müssen wir allen Instanzen von die folgenden Attribute hinzufügen js-canceldescription und js-cancel-game Wenn Sie darauf klicken, kehren Sie zur Startfolie zurück.
data-class='is-active' data-class-element='js-slide, js-home-slide' data-class-scope='js-slide, false' 21. Erstellen Sie das Projekt
Führen Sie im Terminal den folgenden Befehl aus, um das Projekt zu erstellen. Dadurch wird eine kompilierte Version des Projekts in einer neuen Version erstellt dist Verzeichnis. Dieser Befehl verwendet npm-Skripte - eine einfache, native npm-Alternative zu voll funktionsfähigen Build-Tools wie Grunt oder Gulp.
npm run build22. Servieren Sie das Projekt.
Führen Sie abschließend im Terminal den folgenden Befehl aus, um einen lokalen Server für den Server zu erstellen dist Mappe. Notieren Sie sich die im Terminal zurückgegebene Portnummer. Navigieren Sie im Browser zu http: // localhost: IHRE-PORT-NUMMER um das fertige Projekt anzuzeigen.
npm run serve 23. Testen Sie das Projekt
Nachdem Sie das Projekt abgeschlossen haben, wird die gesamte Klassenlogik von unserer wiederverwendbaren Funktion verarbeitet. Wenn dies ein Live-Projekt wäre und im Laufe der Zeit mehr Seiten oder Komponenten hinzugefügt würden, würde sich das Hinzufügen neuer Klassenlogik für diese erheblich verringern, da wir nicht mehr für jede Instanz maßgeschneiderte Funktionen schreiben müssen.
Dieser Artikel wurde ursprünglich in Ausgabe 267 von Web Designer, dem Magazin für kreatives Webdesign, veröffentlicht und bietet Experten-Tutorials, aktuelle Trends und kostenlose Ressourcen. Abonnieren Sie hier den Web Designer .
Zum Thema passende Artikel:
