技術標籤：# ThinkPHP

一、錯誤程式碼：

<a class="item" href="javascript:;" data-options="{$items['提現記錄']|json_encode}"></a>
<script type="text/javascript">
	//監聽點選
	$('.item').on('click', function(){
		var options = $(this).data('options');
		console.log(options);
	});	
</script>
 

在thinkphp的模板中，上面的程式碼data-options使用的是單引號，結果無法正確輸出json資料值。

二、正確程式碼：

<a class="item" href="javascript:;" data-options='{$items["提現記錄"]|json_encode}'></a>
<script type="text/javascript">
	//監聽點選
	$('.item').on('click', function(){
		var options = $(this).data('options');
		console.log(options);
	});	
</script>
 

在thinkphp的模板中，上面的程式碼data-options使用的是雙引號，結果成功輸出了json資料值，如下圖：

HTML的data-* 屬性

1、定義和用法

data-* 屬性用於儲存頁面或應用程式的私有自定義資料。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

儲存的（自定義）資料能夠被頁面的 JavaScript 中利用，以建立更好的使用者體驗（不進行 Ajax 呼叫或伺服器端資料庫查詢）。

data-* 屬性包括兩部分：

• 屬性名不應該包含任何大寫字母，並且在字首 "data-" 之後必須有至少一個字元
• 屬性值可以是任意字串

註釋：使用者代理會完全忽略字首為 "data-" 的自定義屬性。

2、HTML 4.01 與 HTML5 之間的差異

data-* 屬性是 HTML5 中的新屬性。

3、瀏覽器支援

所有主流瀏覽器都支援 data-* 屬性。

4、語法

<element data-*="somevalue">