№15: ланцюжок - CSS-хитрощі

Anonim

Зараз ми вже неодноразово говорили про маленькі штрихи в jQuery API, які насправді дуже приємні. Все добре продумано та вдосконалено. Мережа, безумовно, відноситься до цієї категорії. Як тільки ти починаєш користуватися ним і розуміти це, він відчуває себе надзвичайно природно, ніби не повинно бути іншого шляху.

Основна ідея полягає в тому, що ви використовуєте кілька методів поспіль для однієї колекції елементів.

Наприклад, скажімо, після натискання кнопки я хочу змінити клас, а також змінити текст. Але всередині кнопки є якийсь HTML.

 Open 

За допомогою jQuery ми можемо «з'єднати» всю серію дій разом.

$(".button") .removeClass("open") .addClass("closed") .find(".text") .text("Closed");

Це можливо, оскільки більшість методів jQuery, використовуючись як сеттер, повертають набір елементів, подібний до того, до якого був викликаний метод. Іноді цей набір є абсолютно однаковим, як у випадку з removeClassі addClassтут, а іноді цей набір змінюється, як у випадку з цим find.

У прикладі, з яким ми працювали у відео, ми також говорили про те, .end()який "відступає" один рівень ланцюжка.

$(".button") .removeClass("open") // .button .addClass("closed") // .button .find(".text") // .button .text .text("Closed") // .button .text .end(); // .button .data("thing"); // GETTER on .button

Можливо, це пояснює це краще. Коли набір елементів змінюється, я робив відступ у першому рядку та зазначав зміну в коментарі. Потім, коли ми .end()відступаємо назад на один рівень. Це працює незалежно від того, скільки разів ви змінюєте вибір. Все закінчується, коли ви використовуєте метод, який повертає щось інше, ніж набір елементів.