1

ベースフィドルは、より多くのコンテキストのためにここにあります。

<ul>この例では要素が 3 つしか表示されていませんが、多くの要素があるため、別の JSON ファイルを使用して、アイテムを自動的に入力したいと考えてい<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"

        }, ...

<ul>問題は、Isotope が適切に動作するために、このコードを使用して手動で HTML を作成し、それを に貼り付けなければならないことです。<ul>空の 、高さ 0px のコンテナ、<li>適切な Isotope マークアップを取得しないなど、さまざまなエラーに遭遇しました。

何度も試みた後、これをコード化することはできません。JSON データを取得し、要素を作成し、Isotope を使用するのは簡単だと思いました。

ウィザードが問題を解決できることを願っています。

4

1 に答える 1

1

自分で解決しました。

他の誰かが同じ状況に遭遇した場合の解決策は次のとおりです。

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

    myNewFunction();

    });

myNewFunctionには、getJSONのものとすべてのIsotopeのものを含める必要があります。

注意：アイソトープコードは、getJSONブロックの最初の後ろ});と最後の前に配置する必要があります。});

次に、すべてが別のファイルにあるmyNewFunctionにラップされます。

これで、追加、改訂、および削除のために1つのJSONファイルを編集するだけで済みます。

うまく動作します。

于 2012-12-10T03:24:48.343 に答える