Bu yazıda jquery ile data attribute değeri nasıl alınır, nerede kullanılır onu paylaşacağım.
Data attribute kullanılırken genellikle “data-field”, “data-id” gibi tag isimleri verilerek kullanılmaktadır ancak tercih size kalmıştır. Div, buton, href gibi yani parametre değeri alabilecek elementlerde kullanabilirsiniz. Şimdi data attribute değerini alma ve kullanma yöntemlerini örneklerle aşağıda göstereceğim.
Canlı Demo’da “data-id” ve “data-field” parametrelerine ait değerleri alert ile ekranda görebilirsiniz. Data attribute değerine göre veya hepsini silme işlemi yapmak isterseniz “.remove()” metodu kullanarak yapabilirsiniz. Tümüne aşağıdaki örnekten ulaşabilirsiniz.
Canlı Demo
Aşağıdaki kaynak kodlar “Html + CSS + JS “ ile birlikte verilmiştir. Tümünü kopyalayıp “.html” şeklinde kayıt ettiğinizde hemen çalıştırabilirsiniz.
KAYNAK KODLAR İÇİN
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<TITLE>Jquery Data attribute Değerini Alma Ve Silme</TITLE>
<style>
.body {
background-color:#e3f7ff;
font-size:19px;
line-height:40px;
};
</style>
</head>
<body>
<div class="body">
<h3>Data attribute Kullanımı | data-id & data-field</h3>
1-)<input type="text" data-id="1453" placeholder="İnput elementi"/><button id="inputButon">İnput Değeri Al</button>
<br>
<div data-field="1071">2-) Div Elementi<button id="divButon">Div Değeri Al</button></div>
3-)<a href="" data-id="1923">A href Elementi</a><button id="hrefButon">A href Değeri Al</button><br>
<button id="dataSil">SİL DATA-ID</button>
</div>
<script type="text/javascript">
$("#inputButon").on("click", function(){
var dataInputDegeri=$("input").attr("data-id");
alert("Data-id= "+ dataInputDegeri);
});
$("#divButon").on("click", function(){
var dataDivDegeri=$(".body div").attr("data-field");
alert("Data-field= "+ dataDivDegeri);
});
$("#hrefButon").on("click", function(){
var dataHrefDegeri=$("a").attr("data-id");
alert("Data-id= "+ dataHrefDegeri);
});
$("#dataSil").on("click", function(){
$('[data-id]').remove(); // yada Tekli Silme için $('[data-id="1923"]').remove();
$('[data-field]').remove(); //$('[data-field="1071"]').remove();
});
</script>
</body>
</html>
