Hvis du lærer noget større stykke frontend arkitekturfilosofi fra denne serie, skal du lære denne. Bare skift klasse. I denne screencast begynder vi kun at gå ned ad et stort kaninhul med JavaScript for at stoppe, fange os selv og bruge CSS i stedet. Når du ændrer noget visuelt, er det domænet for CSS. Ikke kun er det godt til det, det er typisk mere performant og opretholder en sund "adskillelse af bekymringer", der giver et langsigtet sundt websted.
Efter vi kom til vores sanser, endte vi simpelthen med at bytte 1) knapteksten 2) en data-stateattribut 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 endte vi:
Se Pen quFCo af Chris Coyier (@chriscoyier) på CodePen
Ja, denne video (og stemning) er "bare skift klasse!", Og vi ændrer en translate = "no"> data- * attributter bare fordi jeg kan lide dem. Jeg tænker på dem som klasser med navnefordeling eller klasser med værdier. Formentlig mere nyttigt i CSS end klasser, og de har nøjagtig samme specificitetsværdi.
Gør det? /: syntaks ser underligt ud? I så fald er det kendt som en ternær (eller "betinget") operatør.
Den første linje er en test, den næste linje (eller bit efter?) Er, hvad der sker, hvis denne test er sand, den sidste linje (eller bit efter :) er, hvad der sker, hvis testen er falsk. Måske hjælper dette:
// 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");Undgå dem ikke bare fordi de ser underlige ud, de kan være mere effektive (og i sidste ende læse lige så godt, så længe du ikke bliver nødt) som om / ellers logik.
Doug Neiner har en god artikel om ideen om "bare skift klasse". Klasser har så meget magt i CSS. Du kan skjule / vise ting, flytte ting, ændre tingens udseende, udløse animationer ... himlen er grænsen. Og jo højere op i "træet" (DOM) du anvender klassen, jo mere kaskadekraft har du. En klasseændring på kroppen betyder, at du kan styre alt på hele siden med en enkelt klasse. Og alt sammen med en meget lille mængde JavaScript.
Når du først har købt dig ind i dette, bliver du en lykkeligere udvikler.