1

基本小提琴在这里以获得更多上下文。

该示例仅显示三个元素，但会有很多元素，因此我想使用单独的 JSON 文件并自动填充<ul>项目<li>。

我使用这段代码在小提琴中创建了 HTML 以及它下面的 JSON。

$.getJSON('tdata.json',
    function(data){
      $.each(data.Users, function(i,Users){
      $('#tumblrlist').append("<li class=\"tumblr pbs " + Users.tumblrClass + "\" style=\"width:132px; height: 132px;\" ><div class= \"" + Users.tumblrClass + "\" ><a href=\"/t1.html?t=" + Users.tumblr + "\" rel=\"external\" ><img  src=\"http://api.tumblr.com/v2/blog/" + Users.tumblr + ".tumblr.com/avatar/128/ \" title=\""+ Users.tumblrTitle + "\" alt=\"" + Users.tumblrTitle + "\"></a></div><span class=\"tumblrName\">" + Users.tumblrTitle + "</span></li>");
      });
    });

外部 JSON 文件如下所示（格式正确，生成 HTML 没有问题）：

{"Users":[
        {
            "tumblr":"pbstv",
            "tumblrImage":"pbstv",
            "tumblrTitle":"PBS & Tumblr",
            "tumblrClass": "pbs"

        }, ...

问题是我被迫使用此代码手动创建 HTML 并将其粘贴到<ul>Isotope 中以正常运行。我遇到了各种错误，包括空<ul>s、0px 高度容器和<li>未获得正确同位素标记的 s。

经过太多我会承认的尝试，我无法得到这个编码。我认为获取 JSON 数据、创建元素和使用同位素会很容易。

希望各位高手能解决问题。

4

1 回答 1

1

自己解决了。

这是其他人遇到相同情况的解决方案：

    $('#one').live( 'pageinit', function(event){

    myNewFunction();

    });

myNewFunction 需要包含 getJSON 内容以及所有 Isotope 内容。

注意：同位素代码需要放在getJSON 块中的第一个});和最后一个之前。});

然后，所有内容都包含在 myNewFunction 中，该文件位于单独的文件中。

现在，我只需要编辑一个 JSON 文件即可进行添加、修订和删除。

效果很好。

于 2012-12-10T03:24:48.343 回答