一、错误代码:
<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">
值 | 描述 |
somevalue | 规定属性的值(以字符串)。 |