html数据属性中的高级数据结构

Question

我很高兴0123,存在。

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

但是....有没有比一个简单的字符串更好？

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

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

Answer 1

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

Answer 2

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

数据属性中的字符串会自动转换为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 

您可以参阅片断为同一

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>

Answer 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>

Answer 4

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

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); 
 
};