Ако из ове серије научите било који битни део филозофије фронт енд архитектуре, научите ову. Само промените наставу. У овом сцреенцаст-у почињемо да се спуштамо у велику зечју рупу ЈаваСцрипт-а само да бисмо се зауставили, ухватили и користили ЦСС. Када нешто визуелно мењате, то је домен ЦСС-а. Не само да је добар у томе, већ је и ефикаснији и одржава здраво „раздвајање брига“ што чини дугорочну здраву веб страницу.
Након што смо се опаметили, једноставно смо на крају заменили 1) текст дугмета 2) data-stateатрибут на контејнеру.
$(".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")); ));Ево где смо завршили:
Погледајте Пен куФЦо Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у
Да, овај видео (и осећање) је „само промените класу!“ И мењамо атрибуте транслате = "но"> дата- * само зато што ми се свиђају. Мислим на њих као на часове размакнуте именима или на класе са вредностима. Вероватно кориснији у ЦСС-у од класа и имају потпуно исту вредност специфичности.
То ради ? /: синтакса изгледа чудно? Ако је тако, то је познато као трокраки (или „условни“) оператор.
Први ред је тест, следећи ред (или бит после знака?) Је оно што се дешава ако је тест ако је тачно, последњи ред (или бит после :) је оно што се догађа ако је тест нетачан. Можда ово помаже:
// 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");Не избегавајте их само зато што изгледају чудно, могу бити ефикаснији (и на крају подједнако добро читати, све док не полудете) као да је / иначе логика.
Доуг Неинер има добар чланак о идеји „само промени часове“. Часови имају толико снаге у ЦСС-у. Можете сакрити / показати ствари, преместити их, променити изглед ствари, покренути анимације ... небо је граница. И што више у „дрвету“ (ДОМ) примените класу, то имате већу каскадну снагу. Промена класе на телу значи да можете једним предметом да контролишете било шта на целој страници. И све то са врло малом количином ЈаваСцрипт-а.
Једном када купите ово, бићете срећнији програмер.