Sekiranya anda mempelajari sedikit falsafah seni bina bahagian depan dari siri ini, pelajari yang pertama. Tukar kelas sahaja. Dalam screencast ini, kita mula menggunakan lubang JavaScript arnab hanya untuk berhenti, menangkap diri sendiri, dan menggunakan CSS sebagai gantinya. Apabila anda mengubah sesuatu secara visual, itu adalah domain CSS. Tidak hanya pandai, ia lebih berprestasi dan mengekalkan "pemisahan kebimbangan" yang sihat yang menjadikan laman web sihat jangka panjang.
Setelah sedar, kita akhirnya menukar 1) teks butang 2) data-stateatribut pada bekas.
$(".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")); ));Di sinilah kami akhirnya:
Lihat Pen quFCo oleh Chris Coyier (@chriscoyier) di CodePen
Ya, video ini (dan sentimen) adalah "ubah kelas saja!", Dan kami mengubah atribut translate = "no"> data- * hanya kerana saya menyukainya. Saya menganggapnya seperti kelas jarak nama, atau kelas dengan nilai. Boleh dikatakan lebih berguna dalam CSS daripada kelas dan mereka mempunyai nilai kekhususan yang sama.
Adakah itu ? /: sintaks nampak pelik? Sekiranya ya, itu boleh diketahui sebagai pengendali ternary (atau "bersyarat").
Baris pertama adalah ujian, baris seterusnya (atau bit selepas?) Adalah apa yang berlaku jika ujian itu benar, baris terakhir (atau bit selepas :) adalah apa yang berlaku jika ujian itu salah. Mungkin ini membantu:
// 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");Jangan menghindarinya hanya kerana kelihatan pelik, mereka boleh menjadi lebih cekap (dan akhirnya membaca juga, selagi anda tidak gila) seolah-olah / logiknya.
Doug Neiner mempunyai artikel yang bagus mengenai idea "ubah kelas". Kelas mempunyai banyak kekuatan dalam CSS. Anda boleh menyembunyikan / menunjukkan sesuatu, menggerakkan sesuatu, mengubah penampilan sesuatu, mencetuskan animasi ... langit adalah batasnya. Dan semakin tinggi di "pohon" (DOM) anda menerapkan kelas, semakin banyak kekuatan yang anda miliki. Perubahan kelas pada badan bermaksud anda dapat mengawal apa sahaja di seluruh halaman dengan satu kelas. Dan semuanya dengan jumlah JavaScript yang sangat kecil.
Sebaik sahaja anda menggunakan ini, anda akan menjadi pemaju yang lebih gembira.