Hallo teman-teman Dumet School, Kembali lagi dengan saya Shelli Ripati di kursus Web Design. Kali ini saya akan Membuat Sistem Toggle Dengan Menggunakan Jquery. Dimana pada studi kasus kali ini saya akan membuat system toggle untuk mengubah nilai false dan true.
Nah untuk dapat Membuat Sistem Toggle Dengan Menggunakan Jquery, kita buat terlebih dahulu struktur htmlnya ya teman-teman.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.name{cursor: pointer}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h3>Todos</h3>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody id="content"></tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Nah jika sudah selesai maka kita akan masuk kedalam script jquerynya untuk dapat mengubah nilai true menjadi false dan begitupun sebaliknya.
<script>
$(document).ready(function(){
var todos = [
{name:"HTML", is_completed:false},
{name:"CSS", is_completed:true}
]
var app = {
show:function(){
var todoname = $("#content");
todoname.html("");
if(todos.length>0){
todos.forEach(function(value, index){
var classtodo = "badge " + (value.is_completed ? 'badge-success' :'badge-danger');
console.log(value)
todoname.append(`<tr>
<td>${index+1}</td>
<td class="name">${value.name}</td>
<td><span class="${classtodo}">${value.is_completed}</span></td>
</tr>`)
})
}else{
todoname.append(`<tr>
<td colspan="3">Name is empty</td>
</tr>`);
}
},
toogle:function(){
var elemen = $(this)
todos.forEach(function(value, index){
if(value.name === elemen.text()){
value.is_completed = !value.is_completed
}
})
app.show()
}
}
app.show()
$(document).on("click", ".name", app.toogle)
})
</script>
Disini saya membuat fungsi show untuk menampilkan datanya dan disambung dengan fungsi toggle untuk dapat mengubah nilai status dari false menjadi true dan begitupun sebaliknya dengan cara mengklik class namenya saja dan fungsi toggle dijalankan. Didalam fungsi toggle ada pengecekan antara data array todos dengan data yang kita klik. Jika sama maka value is_completed akan berubah menjadi false atau true.
Jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.
Demikian artikel tentang cara Membuat Sistem Toggle Dengan Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba ya teman-teman.