JQuery $(this) & addClass

Fungsi addClass() digunakan untuk menambahkan class baru pada element-element tertentu yang diinginkan. Misalnya ketika mau membuat tabbed menu pada sebuah website, kita bisa menggunakan fungsi addClass untuk memudahkannya.

So, Guys! mari kita belajar bersama, simaklah short tutorial di bawah ini:

Membuat element h2 yang akan diberi event untuk menambah class pada element h2. Untuk melihat apakah penambahan class berhasil atau tidak, silahkan klik element h2 lalu seleksi/blok element h2 dan div yang muncul setelah diklik. Setelah itu klik kanan dan pilih view selection source di Mozilla.

//perhatikan id yang digunakan 
<h2>Klik aku dan lihat di source code apakah classnya bertambah atau tidak</h2>

Membuat element div untuk diberi event klik, ID digunakan untuk pemanggilan element dari JQuery nanti.

//perhatikan id yang digunakan 
<div class="answer">
Hore!!! Classnya h2 bertambah, aku berhasil.</div>

Script JQuery hover

//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('.answer').hide();
 $('.main h2').toggle(
  function() {
        $(this).next('.answer').slideDown();
     $(this).addClass('close');
  },
  function() {
     $(this).next('.answer').fadeOut();
     $(this).removeClass('close');
   }
 ); // end toggle
}); // end ready
</script>

Keterangan: fungsi $(this) digunakan sebagai kata ganti dari elemnent yang fungsinya memuat $(this). Pada script di atas, $(this) merujuk (sebagai kata ganti) pada element h2. Jadi, ketika event h2 dijalankan, $(this) akan mewakili h2 sebagai pemilik event.

Contoh

Klik aku dan lihat di source code apakah classnya bertambah atau tidak

Hore!!! Classnya bertambah, aku berhasil.