Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya, pada tutorial sebelumnya kita telah membahas sedikit banyak tentang method-method yang ada pada jquery, dan kali ini kita akan belajar tentang perbedaan method toggleclass dengan method addclass pada jquery.
Pada tutorial saya sebelumnya saya telah membahsa fungsi dari methood addclass yang berfungsi untuk menambahkan class pada element html dengan fungsi dari jquery, nah sekarang saya akan menejelaskan sedikit tentang method toggleclass pada jquery, toggle class merupakan method gabungan yaitu fungsi method dari addclass dan removeclass, yaitu menghapus dan menambahkan class pada element html, jika fungsi addclass adalah hanya sekali aksi yaitu click, dimana jika kita membuat fungsi pada sebuah tombol maka fungsi itu hanya tereksekusi satu kali yaitu menambahkan class, namun dengan toggleclass kita dapat membuat 2 fungsi sekaligus yaitu add dan remove, untuk lebih jelasnya kita langsung saja praktekan, pertama silahkan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> </head> <body> <button>Ubah</button> <h1>Dumet School.</h1> </body> </html> |
Saya membuat sebuah tombol, dan membuat element h1, lalu coba teman-teman tambahkan script css berikut ini:
|
1 2 3 4 5 6 |
<style> .color { color: green; } </style> |
Saya membuat style class color dengan memberikan warna text hijau, class ini yang akan nanti saya akan tambahkan pada element h1,
Jika sudah silahkan tambahkan script jquery berikut ini:
|
1 2 3 4 5 6 7 8 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1").toggleClass("color"); }); }); </script> |
Pertama pasti kita harus mereload library dari jquery, lalu saya membuat besbuah event click pada button yang apabila tombol diklik maka h1 akan mengalami method toggleclass yang akan menambahkan dan menghapus class color,
dengan mengetikan script diatas secara lengkap maka ketika kita klik tombolnya maka hasilnya akan seperti ini:
dan jika kita klik lagi tombolnya maka class color akan terhapus dan hasilnya akan seperti ini:
Class yang tadi kita tambahkan akan terhapus karena efek toggle class adalah efek bolak-balik, gimana teman-teman cukup mudah bukan?
Untuk tutorial kali ini tentang perbedaan method toggleclass dengan method addclass pada jquery saya rasa cukup sampai sini dulu, semoga bermanfaat,