Ако научите някаква основна част от архитектурната философия на предния край от тази серия, научете тази. Просто сменете класовете. В този скрийнкаст започваме да се спускаме по основната заешка дупка на JavaScript, само за да спрем, да се хванем и вместо това да използваме CSS. Когато променяте нещо визуално, това е домейнът на CSS. Освен че е добър в това, той обикновено е по-ефективен и поддържа здравословно „разделяне на проблемите“, което прави дългосрочен здравословен уебсайт.
След като се опомнихме, накрая просто сменихме 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")); ));Ето къде се озовахме:
Вижте Pen quFCo от Chris Coyier (@chriscoyier) на CodePen
Да, това видео (и настроението) е „просто сменете класовете!“ И ние променяме атрибутите translate = "no"> data- * само защото ми харесват. Мисля за тях като за класове с интервал или класове със стойности. Може би по-полезни в CSS от класовете и те имат абсолютно същата стойност на специфичност.
Това ли? /: синтаксисът изглежда странно? Ако е така, това се знае като троичен (или „условен“) оператор.
Първият ред е тест, следващият ред (или битът след?) Е какво се случва, ако този тест е истина, последният ред (или битът след :) е какво се случва, ако този тест е невярен. Може би това помага:
// 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");Не ги избягвайте, само защото изглеждат странно, те могат да бъдат по-ефективни (и в крайна сметка да четат също толкова добре, стига да не се побъркате), сякаш / иначе логика.
Дъг Нейнер има добра статия за идеята „просто сменете класовете“. Класовете имат толкова голяма сила в CSS. Можете да скриете / покажете нещата, да преместите нещата, да промените външния им вид, да задействате анимации ... небето е границата. И колкото по-нагоре в „дървото“ (DOM) прилагате класа, толкова повече каскадна мощност имате. Промяна на класа на тялото означава, че можете да контролирате всичко на цялата страница с един клас. И всичко това с много малко количество JavaScript.
След като закупите това, ще станете по-щастлив разработчик.