JQuery - html tag 的資料屬性取得(data-)

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取得。