Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, gimana masih semangat belajarnya, kita lanjut lagi belajarnya ya teman-teman, pada pembahasan kali ini kita akan membuat study kasus sederhana yaitu menampilkan list hero terpilih dengan jquery.

Sebelumnya silahakan teman-teman download dulu beberapa gambar, saya sudah menyiapkan gambarnya, pada folder img, seperti gambar berikut ini:
Study Case Menampilkan List Hero Terpilih Dengan Jquery 1

Saya membuat sebuah folder latihan didalamnya terdapat folder img yang isinya adalah gambar diatas, nah sekarang sejajar dengan folder img teman-teman buat sebuah file latihan.html dan didalamnya ketikan script html berikut ini:

Saya menggunakan bootstrap untuk stylenya, lalu didalamnya saya membuat ttable yang isinya adalah list-list hero yang bisa dipilih, dan jika teman-teman jalankan pada browser hasilnya akan seperti berikut ini:

Study Case Menampilkan List Hero Terpilih Dengan Jquery 2

Nah jika sudah, kita akan buat fungsi jquery untuk menampilkan gambar disampingnya ketika kita memilih salah satu dari list hero yang kita tampilkan, silahkan teman-teman tambahkan script jquery seperti berikut ini:

Saya membuat sebuah event klik pada radionya dimana setelah event saya membuat sebuah variable yang nilainya diambil dari atribute datalist, lalu saya mencetaknya pda id result, jika sudah ketika teman-teman pilih salah satu dari radionya, maka akan tampil seperti berikut ini:

Study Case Menampilkan List Hero Terpilih Dengan Jquery 3

NOTE : Nilai data-list pada htmlnya harus sama dengan nama gambar yang teman-teman sudah siapkan.

Oke teman-teman saya kira untuk tutorial kali ini tentang  study case Menampilkan List Hero Terpilih Dengan Jquery saya rasa cukup sampai sini dulu, semoga bermanfaat

Terima kasih