# 15: Rantai - Trik CSS

Anonim

Kami telah beberapa kali bercakap mengenai sentuhan kecil di jQuery API yang sangat bagus. Semuanya dipertimbangkan dan diperhalusi. Rantai pasti termasuk dalam kategori itu. Sebaik sahaja anda mula menggunakannya dan memahaminya, rasanya sangat semula jadi, seperti tidak ada cara lain.

Idea utamanya ialah anda menggunakan beberapa kaedah berturut-turut pada satu kumpulan elemen.

Sebagai contoh, katakan selepas saya mengklik butang saya mahu menukar kelas dan juga menukar beberapa teks. Tetapi butang itu mempunyai beberapa HTML di dalamnya.

 Open 

Dengan jQuery, kita dapat "merantai" keseluruhan rangkaian tindakan bersama.

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

Ini mungkin kerana kebanyakan kaedah jQuery, sementara digunakan sebagai setter, mengembalikan set elemen seperti yang digunakan oleh kaedah tersebut. Kadang-kadang set itu sama, seperti yang berlaku di sini removeClassdan addClassdi sini, dan kadang-kadang set itu diubah seperti yang berlaku di sini find.

Dalam contoh yang kami bekerjasama dalam video, kami juga membincangkan tentang .end()"mundur" satu tahap di rantai ini.

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

Mungkin itu menerangkannya dengan lebih baik. Apabila kumpulan elemen berubah, saya mengikat baris pertama dan melihat perubahan dalam komen. Kemudian ketika kita .end()mundur satu tahap. Ini berfungsi tidak kira berapa kali anda menukar pilihan. Semuanya akan berakhir apabila anda menggunakan kaedah yang mengembalikan sesuatu selain daripada satu set elemen.