html数据属性中的高级数据结构[重复]答案

【问题标题】：High level data structures in html data attribute [duplicate]html数据属性中的高级数据结构[重复]
【发布时间】：2017-08-22 19:58:50
【问题描述】：

我很高兴html5 data attribute 存在。

我可以将一个简单的字符串写入 html 属性并通过 jquery 访问它们。

但是....不仅仅是一个简单的字符串不是很好吗？

有没有办法将 JSON 编码到这些数据属性中。

在我当前的用例中，我需要将字符串列表存储在 html5 数据属性中。

【问题讨论】：

您不能在 JavaScript 中以其他方式嵌套此列表吗？这不是很好的关注点分离...
你的意思是……$("#ele").attr('data-example', JSON.stringify(new Array('1', '2')))?
json 字符串不起作用吗？就像一个 JSON.Stringify(Object)。

标签： javascript jquery html

【解决方案1】：

   <div id ="test" data-something='{"something":"something"}'></div>

data-attribute 中的字符串会自动转换为 JavaScript 对象。

你可以像这样在 javascript 中访问它。

var somethingObject = $("#test").data("something");

var jsonSomethingObject = JSON.stringify(somethingObject);

console.log(somethingObject); //this will print the main javascript object
console.log(jsonSomethingObject);// this will print stringify javascript object

你也可以参考sn-p

var someObject = $("#test").data("student");
    
var jsonData = JSON.stringify(someObject);
 
 $('#display').text("id:"+someObject.id +" name:"+someObject.name)
console.log(someObject);
console.log(jsonData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" data-student='{"name": "Dhiraj", "id": 1}' />

<div id="display"></div>

【讨论】：

能否请您告诉我如何从 jquery 访问这本词典。到目前为止，我以为我得到了一个简单的字符串。
在评论中查看您问题的更新答案

【解决方案2】：

您可以将json作为字符串放入data属性中，并使用JSON.parse()获取。

【讨论】：

【解决方案3】：

看来你可以使用JSON.stringify

$("#ele").attr('data-example', JSON.stringify(new Array('1', '2')));

console.log($("#ele").attr('data-example'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='ele' data-example="nothing"></div>

【讨论】：

【解决方案4】：

您可以将 JSON 字符串存储在 data- 属性中。

function onPClick(evt) {
  var special = evt.target.getAttribute('data-special');
  if (special != null) {
    try {
      console.log("JSON", JSON.parse(special));
    } catch (error) {
      console.log("STANDARD", special);
    }
  } else {
    console.log("NULL");
  }
}
var ps = document.getElementsByTagName("p");
for (var pi = 0; pi < ps.length; pi++) {
  var p = ps[pi];
  p.onclick = onPClick;
}

<p>I am special!</p>
<p data-special='YES!'>I am special!</p>
<p data-special='{"a":"bob"}'>I am special!</p>

为了分离关注点，将数据保存在不必每次更改 HTML 时都更新的地方会更好：

var p = document.body.appendChild(document.createElement("p"));
p.innerHTML = "Click me!";
Object.defineProperty(p, 'mySuperSecretValue', {
  value: 37,
  writable: true,
  enumerable: true,
  configurable: true
});
p.onclick = function pclick(evt) {
  console.log(evt.target.mySuperSecretValue++, evt.target.outerHTML);
};

【讨论】：