Якщо ви вивчаєте якісь основні філософії архітектури інтерфейсу з цієї серії, вивчіть цю. Просто змініть класи. У цьому скрінкасті ми починаємо спускатися по великій кролячій норі 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.
Як тільки ви придбаєте це, ви станете щасливішим розробником.