用 html/jquery 中的一个 JSON 字符串替换许多数据标签 [重复]

Posted 2023-03-05

【中文标题】用 html/jquery 中的一个 JSON 字符串替换许多数据标签 [重复]

【英文标题】：Replace many data-tags with one JSON string in html/jquery [duplicate]

【发布时间】：2020-12-13 05:46:05

【问题描述】：

我习惯使用大量的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 出现。这样做的正确方法是什么？

【问题讨论】：

试试$in.data("options")[0].group。您已经使用[ 和] 使您的JSON 表示一个数组。另外，jQuery的data函数会自动解析data-属性中的JSON

<span data-options='"group":"1","item":"2","user":3". . . .'></span>

【参考方案1】：

如果您只想传输多个不同的单个值（如 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。

【参考方案2】：

如果数据属性包含有效的 json，jQuery data() 会自动为你解析。

$('span[data-options]').each(function()
    const opts = $(this).data('options');        
    console.log('Type:', typeof opts)
    console.log(opts);
    console.log( '-----------');
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-options='"group":"1","item":"2","user":"3"'></span>
<span data-options='"group":"2","item":"3","user":"4"'></span>