JQuery - html tag 的資料屬性取得(data-)
今天在做一些研究,發現原來JQuery有一個功能可以拿來利用,就是data(),
作法是使用JQuery物件,
var data = $(this).data();
可以得到物件資料
做一個小小的示範如下
<body>
<div>
<ul class="names">
<li data-Name="王大明" data-Age="18">王大明</li>
<li data-Name="李小二" data-Age="24">李小二</li>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$('ul li').click(function(){
var data = $(this).data();
//alert(JSON.stringify(data));
alert(data.name+' '+data.age+'歲');
});
});
</script>
這樣,在tag下了data-XXX的屬性,以得到XXX的資料,就變得很方便,就可以想辦法使用ajax取得的資料,塞到tag的data屬性裡,就容易取得資料並做相對應的動作
但,測試結果,雖然使用的是data-Age,但使用data取得後,他其實變成了小寫,反而是要用data.age才能取得,而不能使用data.Age取得。