Thinkphp使用data-options踩坑记录

一、错误代码：

<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 中的新属性。

扫描二维码关注公众号，回复： 12802089 查看本文章

3、浏览器支持

所有主流浏览器都支持 data-* 属性。

4、语法

<element data-*="somevalue">

值	描述
somevalue	规定属性的值（以字符串）。