Jika Anda hanya menulis kode di atas, maka tidak akan terjadi apa-apa pada hasil pekerjaan Anda. Mengingat akan ada event penambahan dan penghapusan #area { background:black; pading:10px 20px; color:#fff; }3 pada elemen target, maka sebaiknya Anda juga menambahkan deklarasi CLASS berwarna hijau di CSS, padahal secara visual tidak ada elemen yang memiliki #area { background:black; pading:10px 20px; color:#fff; }3. Dengan begitu, ketika suatu elemen mengalami penambahan kelas, kode #area { background:black; pading:10px 20px; color:#fff; }5 baru akan dipanggil
#area { background:black; pading:10px 20px; color:#fff; } .hijau { background:green; padding:50px; }Lihat Demo
Contoh Penerapan Manipulasi. toggleClass()
Cara yang satu ini lebih praktis, karena disini kita hanya menggunakan satu tombol untuk membuat dua perintahElemen Objek
<button class='toggle'>Ubah menjadi Hijau atau Hitam</button> <div id='area'>Ini Ibu Ani</div>_CSS
#area { background:black; pading:10px 20px; color:#fff; } .hijau { background:green; padding:50px; }Deklarasi JQuery
$(document).ready(function() { $('.toggle').click(function() { $('#target').toggleClass('hijau'); }); });_Lihat Demo
Perlu diingat bahwa manipulasi #area { background:black; pading:10px 20px; color:#fff; }_1 dan #area { background:black; pading:10px 20px; color:#fff; }7 sama sekali tidak akan mengubah kelas yang tertanam dalam elemen asli. Sebagai contoh, saya akan membuat elemen dengan atribut yang bukan ID, tetapi CLASS seperti ini
<div class='target'>Ini Ibu Ani</div>$(document).ready(function() { $('.target').addClass('hijau'); });Jadi kejadian yang akan terjadi tidak mengubah #area { background:black; pading:10px 20px; color:#fff; }8 menjadi #area { background:black; pading:10px 20px; color:#fff; }3, tetapi hanya akan menyisipkan kelas $(document).ready(function() { $('.ubah').click(function() { $('#target').addClass('hijau'); }); $('.remove').click(function(){ $('#target').removeClass('hijau'); }); });0 di sebelah kelas $(document).ready(function() { $('.ubah').click(function() { $('#target').addClass('hijau'); }); $('.remove').click(function(){ $('#target').removeClass('hijau'); }); });1 seperti ini
<div class='target hijau'>Ini Ibu Ani</div>Penulis. Taufik Nurrohman
Label. Pada dasarnya, jQuery
Kategori. Teknis
1948 Tampilan
2 Komentar
Selasa, 11 September 2012 10. 31 malam Mas Taufik ingin bertanyaTidak dikenal
Jika elemen saya seperti ini
dan ingin menambahkan class baru hanya pada artikel bagian kedua sehingga menjadi seperti ini
bagaimana kabarnya sobat???
Taufik Nurrohman
Rabu, 12 September 2012 04. 11 malam
Gunakan pemilih $(document).ready(function() { $('.ubah').click(function() { $('#target').addClass('hijau'); }); $('.remove').click(function(){ $('#target').removeClass('hijau'); }); });2 dan $(document).ready(function() { $('.ubah').click(function() { $('#target').addClass('hijau'); }); $('.remove').click(function(){ $('#target').removeClass('hijau'); }); });3
Ingat, dalam JavaScript umumnya urutan dimulai dari angka nol ⇒ http. //jsfiddle. net/tovic/yJ6Mg/15/
Komentar telah ditutup
Pasang Iklan
250 × 125
Kategori
- Esai 6
- Teknis 579
Memperbarui
Mengapa Saya Lebih Memilih PHP daripada Node atau Python?
Berkembang tidak harus menguasai berbagai bidang. Karena jika masih setengah hati di satu bidang saja, maka tidak ada gunanya kamu bermain...
Sabtu, 10 Juli 2021
Daftar Isi Bertab Seluler untuk Blogger
Perbarui 2018/08/13. Berbagai perubahan dan fitur baru telah ditambahkan untuk memenuhi saran dan permintaan pengguna. Beberapa pembahasan yang…
Jumat, 28 Mei 2021
Widget Artikel Terkait Blogger · 6 dalam 1
Contoh tampilan widget. Klik untuk memperbesar gambar. Saat ini terdiri dari 6 jenis tampilan yang dapat Anda sesuaikan sendiri. Gawit ini…