Wenn Sie aus dieser Serie etwas über die Philosophie der Front-End-Architektur lernen, lernen Sie diese. Wechseln Sie einfach die Klassen. In diesem Screencast gehen wir ein großes Kaninchenloch von JavaScript entlang, um anzuhalten, uns selbst zu fangen und stattdessen CSS zu verwenden. Wenn Sie etwas visuell ändern, ist dies die Domäne von CSS. Es ist nicht nur gut darin, es ist in der Regel leistungsfähiger und sorgt für eine gesunde „Trennung der Bedenken“, die zu einer langfristig gesunden Website führt.
Nachdem wir zur Besinnung gekommen waren, tauschten wir einfach 1) den Schaltflächentext 2) ein data-stateAttribut auf dem Container aus.
$(".bigger").on("click", function() ( var el = $(this); var module = el.parent(); // Swap expanded state module.attr("data-state") == "expanded" ? module.attr("data-state", "") : module.attr("data-state", "expanded"); // Swap button text. el.text() == el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap")); ));Hier sind wir gelandet:
Siehe den Pen quFCo von Chris Coyier (@chriscoyier) auf CodePen
Ja, dieses Video (und die Stimmung) ist "nur Klassen wechseln!" Und wir ändern ein translate = "no"> data- * Attribut, nur weil ich sie mag. Ich stelle sie mir wie Klassen mit Namensabstand oder Klassen mit Werten vor. In CSS wohl nützlicher als in Klassen und sie haben genau den gleichen Spezifitätswert.
Macht das ? /: Syntax sieht komisch aus? Wenn ja, ist dies als ternärer (oder "bedingter") Operator bekannt.
Die erste Zeile ist ein Test, die nächste Zeile (oder das Bit nach dem?) Ist das, was passiert, wenn dieser Test wahr ist, die letzte Zeile (oder das Bit nach dem :) ist das, was passiert, wenn dieser Test falsch ist. Vielleicht hilft das:
// The boolean (true/false) test module.attr("data-state") == "expanded" // Do this if the test is true ? module.attr("data-state", "") // Do this is the test if false : module.attr("data-state", "expanded");Vermeiden Sie sie nicht, nur weil sie seltsam aussehen. Sie können effizienter sein (und letztendlich genauso gut lesen, solange Sie nicht verrückt werden), als ob / sonst Logik.
Doug Neiner hat einen guten Artikel über die Idee, Klassen zu wechseln. Klassen haben so viel Macht in CSS. Sie können Dinge verstecken / anzeigen, Dinge bewegen, das Erscheinungsbild von Dingen ändern, Animationen auslösen ... der Himmel ist die Grenze. Und je höher im „Baum“ (DOM) Sie die Klasse anwenden, desto mehr Kaskadenkraft haben Sie. Ein Klassenwechsel am Körper bedeutet, dass Sie mit einer einzigen Klasse alles auf der gesamten Seite steuern können. Und das alles mit einer winzigen Menge JavaScript.
Sobald Sie sich dafür entschieden haben, werden Sie ein glücklicherer Entwickler sein.