Yandex Metrica
JQuery İle Data Attribute Değerini Alma - Yasin Sunmaz

Yasin Sunmaz

Kodladıkça değişen bir dünya...

JQuery İle Data Attribute Değerini Alma

02.04.2019 yasinsunmaz 682 0

Bu yazımda HTML 5'de sıkça kullanılan data attritube özelliğinden bahsedeceğim. Data attritube özelliğini HTML'deki elemanlardan olan div, button, a href ve input gibi bir çok farklı yerde kullanabilmekteyiz. Bu elemanlara data özelliği ekleyerek istediğimiz verileri kullanıcı görmeden saklayıp rahatlıkla kullanabilmekteyiz. Web sitelerinde genellikle çoklu seçimlerin olduğu yerlerde (alış-veriş, sepete atma) veya toplu bir işlem uygulayacağımız yerlerde kullanabiliriz.

Kullanımı

data-data_adi="data_degeri"

Örnek: data-product-id="131" data-product-id adlı data'mıza ulaştığımızda 131 değerine ulaşabiliriz.

Örnek Kullanımı

Bir alış-veriş sitesinde telefon, bilgisayar ve tablet olmak üzere üç kategorimiz olsun. Bu kategorileri her tıkladığımda o kategoriye ait kategori id değerini almak isteyelim. Aldıktan sonra kendi amacınıza göre farklı işlemler yaptırabilirsiniz. JQuery ile veri alacağımız için çalıştıracağımız sayfaya JQuery kütüphanesi çağırmamız gerekiyor. JQuery kütüphanesini buradan sayfanıza çağırabilirsiniz.

CSS Kodu

h3.categories{
  padding:5px 0;
  font-size:18px;
  color:#333641;
  border-bottom:2px solid #00aabf;
}
a.category{
    padding: 3px 5px;
    background-color: #00aabf;
    border: 1px solid #00aabf;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;    
}
a.category:hover{   
    background-color: #ffffff;
    border: 1px solid #00aabf;   
    color: #00aabf;   
}

JQuery Kodu

$(".category").click(function(){
  //Data yöntemi ile veri alma
  var categoryId=$(this).data("category-id");
  //Attr yöntemi ile veri alma
  var categoryIdTwo=$(this).attr("data-category-id");
  alert("Data= "+categoryId+" Attr= "+categoryIdTwo);
});

JQuery kodumuzda iki farklı kullanım mevcuttur. Data yönteminde HTML'de belirlemiş olduğunuz data-'dan sonra yazdığınız değişken ismini yazdığınızda veriyi alabilirsiniz. Attr yönteminde de farklı olarak data- ile başlayarak devam eden data tanımlayıcısı ve değişkenin hepsi yazılmalıdır. Attr'de HTML elementlerine ulaşırken data'da sadece data elementlerine ulaşabilmektedir. Kategoriye tıkladığınızda o kategoriye ait iki farklı yöntem ile aynı sonucu getiren bir alert gelecektir. Verileri aldıktan sonra ihtiyaçlarınıza göre kullanabilirsiniz.

Önizleme

Umarım faydalı olmuştur. İyi çalışmalar dilerim.

  • Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.

Diğer Yazılar

YS CSS Yayında!

22.09.2019 yasinsunmaz 135 0

Herkese merhaba, Ne zamandır hayata geçirmek istediğim basit ama yararlı olabileceğini düşündüğüm YS CSS'i artık yayınladım. Bazı durumlarda eleme...

JQuery İle Data Attribute Değerini Değiştirme

08.04.2019 yasinsunmaz 255 0

Bu yazımda HTML 5'de sıkça kullanılan data attritube özelliğindeki data değerini değiştirmeyi anlatacağım. Data attritube özelliğini HTML'deki elemanl...

Visual Studio ESLint Expected Java Script Hatası Çözümü

21.04.2019 yasinsunmaz 353 0

Merhaba arkadaşlar bu yazımda sizlere Microsoft Visual Studio'da karşılaşabileceğiniz Error eqeqeq (ESLint) Expected '===' and instead saw '=='. hatas...