Ja no šīs sērijas apgūstat kādu no galvenajiem arhitektūras filozofijas elementiem, iemācieties šo. Vienkārši mainiet klases. Šajā ekrānuzņēmumā mēs sākam iet uz leju galvenajā JavaScript trušu caurumā tikai tāpēc, lai apturētu, noķertu sevi un tā vietā izmantotu CSS. Kad kaut ko vizuāli maināt, tas ir CSS domēns. Tas ne tikai ir labs, tas parasti ir efektīvāks un uztur veselīgu "problēmu atdalīšanu", kas ilgtermiņā padara veselīgu vietni.
Pēc tam, kad esam sapratuši, mēs vienkārši nonācām 1) pogas tekstā 2) data-stateatribūtā uz konteinera.
$(".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")); ));Lūk, kur mēs nonācām:
Skatiet Krista Koijera (@chriscoyier) Pen quFCo vietnē CodePen
Jā, šis video (un noskaņojums) ir “vienkārši mainiet klases!”, Un mēs mainām atribūtus translate = "no"> data- * tikai tāpēc, ka man tie patīk. Es domāju, ka par tām patīk klases pēc nosaukuma vai klases ar vērtībām. Neapšaubāmi vairāk noderīgas CSS nekā klasēs, un tām ir tieši tāda pati specifiskuma vērtība.
Vai tā? /: sintakse izskatās dīvaini? Ja tā, tas ir zināms kā trīskāršais (vai “nosacītais”) operators.
Pirmā rinda ir pārbaude, nākamā rinda (vai bits aiz?) Ir tas, kas notiek, ja šī pārbaude ir patiesa, pēdējā rindiņa (vai bits aiz :) ir tā, kas notiek, ja šī pārbaude ir nepatiesa. Varbūt tas palīdz:
// 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");Neizvairieties no tiem tikai tāpēc, ka tie izskatās dīvaini, tie var būt efektīvāki (un galu galā lasīt tikpat labi, ja vien jūs neuzkrītat) it kā / citādi loģiku.
Dugam Neineram ir labs raksts par ideju “vienkārši mainīt klases”. Klasēm CSS ir tik liela vara. Jūs varat paslēpt / parādīt lietas, pārvietot lietas, mainīt lietu izskatu, aktivizēt animācijas ... debesis ir robeža. Un jo augstāk “kokā” (DOM) jūs izmantojat klasi, jo vairāk jums ir kaskādes spēks. Klases izmaiņas uz ķermeņa nozīmē, ka ar visu klasi varat kontrolēt visu lapu. Un tas viss ar ļoti niecīgu JavaScript daudzumu.
Kad jūs to iegādājaties, jūs būsiet laimīgāks izstrādātājs.