Hvis du lærer noen viktig del av frontend arkitekturfilosofi fra denne serien, kan du lære denne. Bare bytt klasse. I denne skjermsendingen begynner vi å gå ned et stort kaninhull med JavaScript bare for å stoppe, fange oss selv og bruke CSS i stedet. Når du endrer noe visuelt, er det domenet til CSS. Ikke bare er det bra på det, det er vanligvis mer performant og opprettholder en sunn "separasjon av bekymringer" som gir et langsiktig sunt nettsted.
Etter at vi kom til oss, endte vi ganske enkelt med å bytte 1) knappeteksten 2) et data-stateattributt på containeren.
$(".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")); ));Her havnet vi:
Se Pen quFCo av Chris Coyier (@chriscoyier) på CodePen
Ja, denne videoen (og følelsen) er "bare endre klasser!", Og vi endrer en translate = "no"> data- * attributter bare fordi jeg liker dem. Jeg tenker på dem som klasser med navn, eller klasser med verdier. Uten tvil mer nyttig i CSS enn klasser, og de har nøyaktig samme spesifisitetsverdi.
Gjør det ? /: syntaks ser rart ut? I så fall er det kjent som en ternær (eller "betinget") operatør.
Den første linjen er en test, den neste linjen (eller biten etter?) Er hva som skjer hvis den testen er sann, den siste linjen (eller biten etter :) er hva som skjer hvis testen er falsk. Kanskje dette hjelper:
// 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");Ikke unngå dem bare fordi de ser rare ut, de kan være mer effektive (og til slutt lese like bra, så lenge du ikke blir nøtt) som om / annet logikk.
Doug Neiner har en god artikkel om ideen om å "bare endre klasser". Klasser har så mye kraft i CSS. Du kan skjule / vise ting, flytte ting, endre utseendet på ting, utløse animasjoner ... himmelen er grensen. Og jo høyere oppe i “treet” (DOM) du bruker klassen, jo mer kaskadekraft har du. En klasseendring på kroppen betyr at du kan kontrollere hva som helst på hele siden med en enkelt klasse. Og alt med en veldig liten mengde JavaScript.
Når du har kjøpt deg inn i dette, blir du en lykkeligere utvikler.