Study Case Menampilkan List Hero Terpilih Dengan Jquery

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:

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:

<!DOCTYPE html>
<html>
<head>
	<title>latihan</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div class="container mt-4">
		<div class="row">
			<div class="col-md-3">
				<table>
					<tr>
						<td><input type="radio" data-list="alucard" name="hero">Alucard</td>
					</tr>
					<tr>
						<td><input type="radio" data-list="balmond" name="hero">Balmond</td>
					</tr>
					<tr>
						<td><input type="radio" data-list="lancelot" name="hero">Lancelot</td>
					</tr>
					<tr>
						<td><input type="radio" data-list="alice" name="hero">Alice</td>
					</tr>
					<tr>
						<td><input type="radio" data-list="martis" name="hero">Martis</td>
					</tr>
					<tr>
						<td><input type="radio" data-list="chow" name="hero">Chow</td>
					</tr>
				</table>
			</div>
			<div class="col-md-9" id="result"></div>
		</div>
	</div>
	
</body>
</html>

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:

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:

<script type="text/javascript">
		$(document).ready(function(){
			$('input[type=radio]').on('click', function(){
				var nameHero = $(this).attr('data-list')
				$('#result').html('<img src=img/'+nameHero+'.jpg /> <h3>'+ nameHero.toUpperCase()+'</h3>');
			})
		})
	</script>

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:

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

Study Case Menampilkan List Hero Terpilih Dengan Jquery

Kategori