Contoh Penerapan jQuery data Attribute

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.

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>

---

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>

---

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>