Question

更多背景信息的基础fiddle is here。

该示例仅显示三个元素，但会有很多元素，因此我想使用单独的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数据，创建元素和使用Isotope会很容易。

我希望你的巫师可以解决这个问题。

Answer 1

自己解决了。

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

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

    myNewFunction();

    });

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

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

然后，所有内容都包含在myNewFunction中，该函数驻留在一个单独的文件中。

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

很好地工作。

如何将AJAX与Isotope接受的JSON文件一起使用？

1 个答案: