Manchmal müssen Sie etwas Kleines und Einfaches lernen, um eine Reise in das Lernen von etwas Großem und Komplexem zu beginnen. JavaScript ist riesig und komplex, aber Sie können sich darauf einlassen, indem Sie kleine und einfache Dinge lernen. Wenn Sie ein Webdesigner sind, gibt es meiner Meinung nach vor allem eine Sache, die Sie lernen können und die äußerst hilfreich ist.
Ich möchte, dass Sie Folgendes lernen: Wenn Sie auf ein Element klicken, ändern Sie eine Klasse für ein Element.
Stellen Sie sich vor, wir haben einen Knopf und ein Div:
Click Me I'm an element Das div kann einige Basisstile haben und es kann einige Stile haben, wenn es eine bestimmte Klasse hat:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Kluge CSS-Trickster erkennen dies möglicherweise als Chance für den Checkbox-Hack, aber daran arbeiten wir heute nicht.
Wir möchten der Schaltfläche einen „Ereignis-Listener“ hinzufügen: ein bisschen Code zum „Abhören“, in unserem Fall zum Klicken auf Ereignisse, und in diesem Fall mehr Code ausführen.
Sie wissen, wie wir in CSS Elemente auswählen müssen, um sie zu formatieren? Wir müssen dies auch in JavaScript tun, um unseren Ereignis-Listener anzuhängen. Wir erstellen einen „Verweis“ auf die Schaltfläche als Variable wie folgt:
var button = document.querySelector("button");Nachdem wir einen Verweis auf die Schaltfläche haben, fügen wir diesen Ereignis-Listener hinzu:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Und was wollen wir im Falle eines Klicks tun? Fügen Sie unserem div einen Klassennamen hinzu! Aber genau wie wir eine Referenz für die Schaltfläche brauchten, um Dinge damit zu tun, brauchen wir auch eine Referenz für das div. Lassen Sie uns beide gleichzeitig ausführen. Hier ist der gesamte Code:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Das ist das Ganze, was ich dir zeigen wollte. Mit etwas CSS, das zu dieser "yay" -Klasse hinzugefügt wurde, können wir das div ein- und ausblenden:
Sehen Sie den Stift Click Something / Change Class von Chris Coyier (@chriscoyier) auf CodePen.
Warum diese eine Sache?
Die Entwurfsmöglichkeiten sind endlos, wenn Sie das CSS und den Status eines Elements steuern (welche Klassennamen es hat). Dinge zu verstecken und zu enthüllen ist die offensichtliche Kraft, aber es könnte wirklich alles sein.
Hochstufen
Denken Sie daran, dass Sie nicht nur einen Klassennamen ändern müssen. Sie können mehrere Klassen für ein einzelnes Element oder die Klassen für mehrere Elemente ändern.
Schauen Sie sich die classList-Eigenschaft genauer an. "Umschalten" ist nicht die einzige Option.
Genau wie HTML und CSS bietet JavaScript verschiedene Ebenen der Browserunterstützung. Sehen Sie sich die Browserunterstützung für classList an und fügen Sie addEventListener hinzu. Sind Sie mit diesen Unterstützungsstufen für Ihr Projekt einverstanden? Wenn nicht, können Sie sich mit Polyfills oder sogar mit jQuery befassen.
Wir haben das "Klick" -Ereignis verwendet, aber es gibt viele andere. Andere Mausereignisse, Scrollen, Tastatur und mehr. Viele hundert.
Die Methode, die wir für die Auswahl verwendet haben, war document.querySelector. Dies war nützlich, da es ein einzelnes Element zurückgibt, mit dem wir arbeiten können. Außerdem sind die Selektoren, die Sie ihm geben, genau wie CSS-Selektoren. document.querySelector("#overlay .modal > h2");wäre eine legitime Auswahl. Dies ist jedoch nicht die einzige Methode zur Auswahl. Es gibt auch andere Methoden wie getElementById, querySelectorAll, getElementsByClassName und mehr.
Hier ist ein Beispiel dafür, wo wir eine Reihe von Navigationselementen auswählen und allen gleichzeitig einen Klick-Handler hinzufügen:
Sehen Sie sich die Pen Change Classes on Stuff von Chris Coyier (@chriscoyier) auf CodePen an.
Wenn das JavaScript, das wir in unserem kleinen Beispiel geschrieben haben, aus irgendeinem Grund nicht geladen werden konnte, haben wir immer noch eine Schaltfläche mit der Aufschrift "Click Me". Aber darauf zu klicken würde nicht viel bewirken, oder? Vielleicht könnten wir diese Schaltfläche mit JavaScript einfügen, sodass die Schaltfläche nicht einmal vorhanden ist, es sei denn, wir wissen, dass sie funktionieren wird? Gute Idee, was? ;)