javascript - 如何用json数据动态构造html标签属性？

Question

我在一个名为 test 的变量中有 (Strigified) json 数据。我正在动态 构建 html 元素，而且我希望将 json 数据 插入到元素属性中。

var templateHtml = "":
    $.each(loopValues, function(Key, Value) { // Loops which constructs dynamic data
        var test = '{"type": "page"}';  // this is the json data which need to be appended as data-all attribute value.
        templateHtml = templateHtml.concat("<a data-all="+ test +" href='javascript:;' class='icon' id='TestTt'></a>");
    }
$("#sortable1").html(templateHtml);

执行这些行后，当我看到构造的元素时，它完全被打乱了。如何在元素属性中获取格式良好的 json 数据？

我不想在构建 html 后使用 jquery 在属性上附加 json 数据。我想要在 html 构建时使用此功能。

我引用了 http://gabrieleromanato.name/jquery-binding-animation-data-to-elements-with-json/ http://api.jquery.com/jQuery.parseJSON/

有什么想法吗？

Answer 1

首先，您的代码缺少一些语法元素:

var templateHtml = ""; // use ; not :
$.each(loopValues, function (Key, Value) { // Loops which constructs dynamic data
    var test = '"{type": "page"}'; // this is the json data which need to be appended as data-all attribute value.
    templateHtml = templateHtml.concat("<a data-all=" + test + " href='javascript:;' class='icon' id='TestTt'></a>");
}); //close the loop call

然后您需要在附加测试变量时在其周围添加单引号。我建议您选择在何处使用单引号或双引号并永久坚持选择。我个人在 HTML 中使用双引号，在 JS 中使用单引号:

var templateHtml = '';
$.each(loopValues, function (Key, Value) { // Loops which constructs dynamic data
    var test = "{type: 'page'}"; // this is the json data which need to be appended as data-all attribute value.
    //since its JSON i use single quote inside but double outside.
    templateHtml = templateHtml.concat('<a data-all="' + test + '" href="javascript:;" class="icon" id="TestTt"></a>');
});

FIDDLE here