Če se iz te serije naučite kakšnega bistvenega koncepta arhitekture prednjega dela, se naučite tega. Samo zamenjajte razrede. V tej oddaji se začnemo spuščati po glavni zajčji luknji JavaScripta samo zato, da se ustavimo, ujamemo in namesto tega uporabimo CSS. Ko nekaj vizualno spreminjate, je to domena CSS. Ne samo, da je to dobro, običajno je bolj zmogljivo in vzdržuje zdravo „ločitev skrbi“, ki omogoča dolgoročno zdravo spletno stran.
Ko smo se spametovali, smo na koncu preprosto zamenjali 1) besedilo gumba 2) data-stateatribut na posodi.
$(".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")); ));Tu smo končali:
Oglejte si Pen quFCo Chrisa Coyierja (@chriscoyier) na CodePen
Da, ta video (in sentiment) je "samo spremeni razrede!" In spreminjamo atribute translate = "no"> data- * samo zato, ker so mi všeč. Mislim, da so to razredi, razporejeni z imeni, ali razredi z vrednostmi. Verjetno bolj uporaben v CSS kot razredi in imajo popolnoma enako vrednost specifičnosti.
Ali to? /: sintaksa izgleda čudno? Če je tako, to poznamo kot trojni (ali "pogojni") operater.
Prva vrstica je test, naslednja vrstica (ali bit za?) Je, kaj se zgodi, če je test, če je res, zadnja vrstica (ali bit za :) se zgodi, če je test napačen. Morda to pomaga:
// 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 izogibajte se jim samo zato, ker so videti nenavadno, lahko so bolj učinkoviti (in navsezadnje berejo prav tako dobro, če ne zmešate), kot da bi bilo drugače logika.
Doug Neiner ima dober članek o ideji "samo zamenjaj razrede". Razredi imajo toliko moči v CSS. Stvari lahko skrijete / prikažete, premaknete, spremenite videz stvari, sprožite animacije ... nebo je meja. In višje kot v "drevesu" (DOM) uporabite razred, več kaskadne moči imate. Sprememba razreda na telesu pomeni, da lahko z enim razredom nadzorujete kar koli na celotni strani. In vse z zelo majhno količino JavaScript.
Ko enkrat kupite to, boste srečnejši razvijalec.