Bu yazımda CSS'in genişletilmiş bir versiyonu olan SASS (Syntactically Awesome Style Sheets)'ı ele alacağım. CSS yazma deneyimini geliştiren ve stil tabanlı projelerde daha...
JQuery İle Data Attribute Değerini Değiştirme
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.