Ha ebből a sorozatból megtanulja a front end architektúra filozófiáját, tanulja meg ezt. Csak váltson osztályt. Ebben a képernyőn elkezdjük lefelé menni a JavaScript egyik nagy nyúllyukán, hogy megálljunk, elkapjuk magunkat, és inkább CSS-t használjunk. Amikor vizuálisan változtat valamit, az a CSS domainje. Nem csak jó benne, hanem általában teljesítőképesebb és fenntartja az egészséges „aggodalmak elkülönítését”, ami hosszú távon egészséges webhelyet jelent.
Miután észhez tértünk, egyszerűen kicseréltük 1) a gomb szövegét 2) egy data-stateattribútumot a tárolón.
$(".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")); ));Itt hova kerültünk:
Lásd Chris Coyier (@chriscoyier) Pen quFCo-ját a CodePen-en
Igen, ez a videó (és hangulat) „csak osztályt váltani!”, És csak azért cseréljük a translate = "no"> data- * attribútumokat, mert szeretem őket. Úgy gondolom rájuk, mint névre osztott osztályok, vagy értékekkel rendelkező osztályok. Vitathatatlanul hasznosabb a CSS-ben, mint az osztályok, és pontosan ugyanolyan specifitási értékkel rendelkeznek.
Azt teszi ? /: a szintaxis furcsán néz ki? Ha igen, akkor ez egy három (vagy „feltételes”) operátor.
Az első sor egy teszt, a következő sor (vagy a? Utáni bit) az, ami akkor történik, ha ez a teszt igaz, akkor az utolsó sor (vagy a :) utáni bit történik, ha a teszt hamis. Talán ez segít:
// 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");Ne kerülje őket csak azért, mert furcsán néznek ki, hatékonyabbak lehetnek (és végül ugyanolyan jól olvashatók, mindaddig, amíg nem megy be), mintha logika lenne.
Doug Neinernek van egy jó cikke a „csak osztályváltás” ötletről. Az osztályok ekkora hatalommal bírnak a CSS-ben. Elrejtheti / megmutathatja a dolgokat, mozgathatja a dolgokat, megváltoztathatja a dolgok megjelenését, kiválthatja az animációkat ... az ég a határ. És minél magasabbra a „fában” (DOM) alkalmazza az osztályt, annál több lépcsőzetes erővel rendelkezik. A törzs osztályváltozása azt jelenti, hogy az egész oldalon bármit vezérelhet egyetlen osztály segítségével. És mindezt nagyon apró JavaScript mennyiséggel.
Ha vásárol ebbe, akkor boldogabb fejlesztő leszel.