tRikSonic
Tema

Contoh Penerapan jQuery data Attribute

Terakhir diperbarui : 22 Mei 2018 - 10.05

Penerapan jQuery menggunakan attribute data

TrikSonic - Contoh penerapan jquery data attribute. Artikel ini saya buat karena ada pertanyaan kepada saya melalui chat di Facebook saya.
jQuery
Persiapan :
Pastikan library javascript jQuery sudah terpasang dengan benar, untuk tutorial ini saya menggunakan version 1.12.4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Contoh Penerapan jQuery menggunakan attribute data

Contoh dengan mengambil data attribute

<button class="btn" data-tes="111111">Klik saya</button>
<button class="btn" data-tes="222222">Klik saya</button>

<script>
$(function(){
  $(".btn").click(function(){
   var $this = $(this).attr("data-tes");
    alert($this);
    //kode selanjutnya...
  });
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<button class="btn" data-tes="111111">Klik saya</button>
<button class="btn" data-tes="222222">Klik saya</button>

<script>
$(function(){
  $(".btn").click(function(){
   var $this = $(this).attr("data-tes");
    alert($this);
    //kode selanjutnya...
  });
});
</script>

</body>
</html>

Contoh dengan data attribute sebagai yang menjalankan perintah

<button class="btn" data-tes="show">show</button>
<button class="btn" data-tes="hide">hide</button>

<script>
$(function(){
 $("[data-tes='show']").click(function(){
  $("#demo-area").show();
 });
 $("[data-tes='hide']").click(function(){
  $("#demo-area").hide();
 });    
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<p id="demo-area">Klik tombol dibawah</p>

<button class="btn" data-tes="show">show</button>
<button class="btn" data-tes="hide">hide</button>

<script>
$(function(){
 $("[data-tes='show']").click(function(){
  $("#demo-area").show();
 });
 $("[data-tes='hide']").click(function(){
  $("#demo-area").hide();
 });    
});
</script>

</body>
</html>

Contoh lainnya yang terkait penggunaannnya dengan attribute data

<button data-tes="null" data-value="1">Button 1</button>
<button data-tes="null" data-value="2">Button 2</button>
<button data-tes="null" data-value="3">Button 3</button>
<button data-tes="null" data-value="4">Button 4</button>
<button data-tes="null" data-value="5">Button 5</button>

<div id="demo-area" style="margin-top:15px;">
 Klik tombol diatas
</div>

<script>
$(function() {
  $("[data-tes]").click(function() {
    var a = $(this).attr("data-value"),
        e = $("#demo-area");
    switch (a) {
      case "1":
        e.html("<b>Hai 1</b>");
        break;
      case "2":
        e.html("<code>Hai 2</code>");
        break;
      case "3":
        e.html("<textarea>Hai 3</textarea>");
        break;
      case "4":
        e.html("<mark>Hai 4</mark>");
        break;
      case "5":
        alert("Hai saya alert")
    }
  })
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<button data-tes="null" data-value="1">Button 1</button>
<button data-tes="null" data-value="2">Button 2</button>
<button data-tes="null" data-value="3">Button 3</button>
<button data-tes="null" data-value="4">Button 4</button>
<button data-tes="null" data-value="5">Button 5</button>

<div id="demo-area" style="margin-top:15px;">
 Klik tombol diatas
</div>

<script>
$(function() {
  $("[data-tes]").click(function() {
    var a = $(this).attr("data-value"),
        e = $("#demo-area");
    switch (a) {
      case "1":
        e.html("<b>Hai 1</b>");
        break;
      case "2":
        e.html("<code>Hai 2</code>");
        break;
      case "3":
        e.html("<textarea>Hai 3</textarea>");
        break;
      case "4":
        e.html("<mark>Hai 4</mark>");
        break;
      case "5":
        alert("Hai saya alert")
    }
  })
});
</script>

</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.