带有变量的HTML元素

Question

在jQuery中,我可以创建一个包含数据的HTML元素:

$('<button onclick="btn()"></button>').data("field", { i: i, j: j }).appendTo("body");

并使用它:

function btn(){
    var field = $(this).data("field")
    alert(field.i)
}

HTML

<button onclick="btn()" data-field= "{ i: thevalueofi, j: tthevalueofj }"></button>

function btn(){
    var field = $(this).data("field")
    alert(field.i)
} // it doesn't work

如何在JavaScript中使用数据？

Answer 1

如果你想要一个与你创建的按钮具有相同数据的按钮的html,你将不得不使用html5数据属性.即

<button data-field='{ "i": "thevalueofi", "j": "tthevalueofj" }'></button>

并阅读它

 function btn(){
        var field = $('button').data("field");
        alert(field.i)}
 }

用普通的js

 function btn(){
        var field = JSON.parse(document.querySelector('button').getAttribute("data-field"));
        alert(field.i)}
 }