Yandex Metrica
JQuery İle Data Attribute Değerini Değiştirme - Yasin Sunmaz

Yasin Sunmaz

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

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

08.04.2019 yasinsunmaz 211 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 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 ve aynı zamanda üzerinde rahatlıkla değişiklik yaparak kullanabilmekteyiz. Önceki yazım olan JQuery İle Data Attribute Değerini Alma adlı yazımda data-attritube kullanımı ve değeri almayı anlattım. Şimdi ise HTML elemanlarında yer alan data attribute değerini değiştirmeyi ele alacağım. Bu kullanımda birçok anlamda işinize yarayacağını düşünüyorum.

Örnek:

data-status="0" data-status adlı data'mızda mevcut 0 değeri varken JQuery yardımı ile bu değeri 1 yapabiliriz.

Uygulamalı Örnek

Bir alış-veriş sitesinde telefon, bilgisayar ve tablet olmak üzere üç kategorimiz olsun Bu kategorilerde mevcut data-status değerimiz false görünmektedir. Yapmak istediğimiz olay ise her tıkladığımızda data-status değerini true olarak değiştirmektir. JQuery ile çalışacağımız için sayfamıza JQuery kütüphanesi çağırmamız gerekiyor. JQuery kütüphanesini buradan sayfanıza çağırabilirsiniz.

JQuery Kodu

$(".category").click(function(){
    //İlk durum
    var firstValue=$(this).attr("data-status");
    alert("İlk değer= "+firstValue);
    //Son durum
    //Attr ile data değerini değiştirme
    $(this).attr("data-status", "true");
    //Son değeri alma
    var secondValue=$(this).attr("data-status");
    alert("Son değer= "+secondValue);
});

Bu uygulamamızda tıkladığımız kategoriye ait ilk değeri alert yardımı ile ekrana yazacaktır. Sonrasında ise .category class'ına ait data-status değerini  $(this).attr("data-status", "true"); kodu ile true olarak değiştirmiş oluyoruz. Hemen ardından da güncel verimizi tekrar alarak alert yardımı ile ekrana yazdırıyoruz. Böylece tıkladığımız kategorinin data-status değeri true olarak değişmiş oldu. Bu kullanım ile sayfanızda birçok etkileşimi sağlayabilirsiniz.

GitHub Linki: tıklayınız

CodePen Linki: tıklayınız

Ö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 33 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 Alma

02.04.2019 yasinsunmaz 375 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 h...

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

21.04.2019 yasinsunmaz 287 0

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