时间戳

首页 > 解决方案 > 在 html/jquery 中用一个 JSON 字符串替换许多数据标签

jquery - 在 html/jquery 中用一个 JSON 字符串替换许多数据标签

问题描述

我有使用大量data标签的习惯，然后在 jQuery 中一次读取一个，例如

*html*
<span data-group="1" data-item="2" data-user="abc" data-type="4" . . . . . </span>

*jQuery*
getItemSelected = function($in){dataItem=$in.data("item");}

但是我想知道是否有比创建越来越多的数据标签更好的方法，即使用一个带有 json 作为内容的标签。但到目前为止，我在这方面的所有尝试都失败了。

我在想类似以下的事情：

*html*
<span data-options='[{"group":"1","item":"2","user":3". . . .}]'></span>

*jQuery*
getOptions = function($in)
{
dataOptions=jQuery.parseJSON( $in.data("options") );
alert(dataOptions === "group");
}

但是到目前为止，我尝试过的每一个变体都只是简单地出现在undefined. 这样做的正确方法是什么？

标签： jqueryjson

解决方案

如果您只想传输多个不同的单个值（例如 a group, item, user, type），则 JSON 应该只是一个对象而不是对象数组。

此外，与将所有内容都放入属性相比，您可能会发现将其作为不可见标签的文本内容更容易管理，例如不可运行的<script>标签：

const data = JSON.parse(document.querySelector('#data-tag').textContent);
console.log(
  data.group,
  data.user
);
<script type="application/json" id="data-tag">
{"group":"1","item":"2","user":"3"}
</script>

不需要 jQuery。

推荐阅读