Kadang kala, untuk memulakan perjalanan mempelajari sesuatu yang besar dan kompleks, anda perlu mempelajari sesuatu yang kecil dan sederhana. JavaScript sangat besar dan rumit, tetapi anda dapat memasukkannya dengan mempelajari perkara-perkara kecil dan sederhana. Sekiranya anda seorang pereka laman web, saya rasa ada satu perkara yang boleh anda pelajari yang sangat memberdayakan.
Inilah perkara yang saya ingin anda pelajari: Apabila anda mengklik pada beberapa elemen, ubah kelas pada beberapa elemen.
Merealisasikannya menjadi perkara penting, bayangkan kita mempunyai butang dan div:
Click Me I'm an element Div boleh mempunyai beberapa gaya asas dan dapat memiliki beberapa gaya ketika memiliki kelas tertentu:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Astute CSS-Tricksters mungkin menyedari ini sebagai peluang untuk menggodam kotak centang, tetapi bukan itu yang sedang kita kerjakan hari ini.
Kami ingin melampirkan "pendengar acara" ke butang: sedikit kod untuk "mendengar", dalam kes kami, klik peristiwa, dan apabila itu berlaku, jalankan lebih banyak kod.
Anda tahu bagaimana dalam CSS kita perlu "memilih" elemen untuk menggayakannya? Kita perlu melakukan itu dalam JavaScript juga untuk melampirkan pendengar acara kita. Kami akan membuat "rujukan" ke butang, sebagai pemboleh ubah, seperti ini:
var button = document.querySelector("button");Sekarang kita mempunyai rujukan ke butang, kita akan melampirkan pendengar acara itu:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Dan apa yang ingin kita lakukan sekiranya terdapat klik? Tambahkan nama kelas ke div kami! Tetapi sama seperti kita memerlukan rujukan untuk butang untuk melakukan sesuatu dengannya, kita juga memerlukan rujukan untuk div. Mari lakukan kedua-duanya pada masa yang sama, berikut keseluruhan kod:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Itulah keseluruhan perkara yang ingin saya tunjukkan kepada anda. Dengan beberapa CSS ditambahkan ke kelas "yay", kita dapat memudar dan keluar div:
Lihat Pen Click Something / Change Class oleh Chris Coyier (@chriscoyier) di CodePen.
Mengapa perkara ini?
Kemungkinan reka bentuk tidak berkesudahan apabila anda mengawal CSS dan keadaan elemen apa pun (nama kelas apa yang dimilikinya). Menyembunyikan dan mendedahkan sesuatu adalah kekuatan yang jelas, tetapi sebenarnya boleh jadi apa-apa.
Meningkat
Ingat bahawa anda tidak terhad untuk menukar satu nama kelas. Anda boleh menukar beberapa kelas pada satu elemen atau menukar kelas pada beberapa elemen.
Lihat lebih banyak harta benda classList. "Toggle" bukan satu-satunya pilihan.
Sama seperti HTML dan CSS, JavaScript mempunyai tahap sokongan penyemak imbas untuk pelbagai perkara. Lihat sokongan penyemak imbas untuk classList dan tambahkan addEventListener. Adakah anda OK dengan tahap sokongan untuk projek anda? Sekiranya tidak, anda boleh melihat polyfill, atau bahkan jQuery.
Kami menggunakan acara "klik", tetapi ada banyak yang lain. Acara tetikus lain, tatal, papan kekunci dan banyak lagi. Banyak ratus.
Kaedah yang kami gunakan untuk memilih adalah document.querySelector. Ini berguna kerana ia mengembalikan satu elemen untuk kita bekerjasama. Selain itu, pemilih yang anda berikan sama seperti pemilih CSS. document.querySelector("#overlay .modal > h2");akan menjadi pilihan yang sah. Ini bukan satu-satunya kaedah untuk memilih, tetapi ada kaedah lain seperti getElementById, querySelectorAll, getElementsByClassName, dan banyak lagi.
Berikut adalah contoh di mana kita memilih sekumpulan item navigasi dan melampirkan pengendali klik untuk semuanya sekaligus:
Lihat Pen Change Classes on Stuff oleh Chris Coyier (@chriscoyier) di CodePen.
Sekiranya JavaScript yang kami tulis dalam contoh kecil kami gagal dimuat dengan alasan apa pun, kami masih mempunyai butang yang bertuliskan "Klik Saya". Tetapi mengkliknya tidak akan menghasilkan banyak, bukan? Mungkin kita boleh memasukkan butang itu dengan JavaScript, jadi butangnya tidak ada kecuali kita tahu ia akan berfungsi? Idea bagus, eh? ;)