0

マルチレベルの画像ギャラリーでサイトを構築しています。json を使用してデータを保存します。次のようになります。

{
   "fashion":[
      {
         "alt":"Album1",
         "src":"img/gsp_sait-03_02.png",
         "class":"albumItem",
         "id":"FashionAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"img/gsp_sait-03_02.png",
               "id":"FashionSubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"img/gsp_sait-03_03.png",
               "id":"FashionSubFolder1Img2"
            }
         ]
      }
   ],
   "beauty":[
      {
         "alt":"Album1",
         "src":"img/gsp_sait-03_02.png",
         "class":"albumItem",
         "id":"BeautyAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"img/gsp_sait-03_02.png",
               "id":"BeautySubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"img/gsp_sait-03_03.png",
               "id":"BeautySubFolder1Img2"
            }
         ]
      }
   ],
   "wedding":[
      {
         "alt":"Album1",
         "src":"img/gsp_sait-03_02.png",
         "class":"albumItem",
         "id":"WeddingAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"img/gsp_sait-03_02.png",
               "id":"WeddingSubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"img/gsp_sait-03_03.png",
               "id":"WeddingSubFolder1Img2"
            }
         ]
      }
   ]
}

適切なカテゴリを選択する方法がわかりません。ユーザーが美しさをクリックしたとしましょう。そのため、「美しさ」セクションを選択する必要があります。次の関数を使用します。

$.getJSON("data/data.json", function(data) {
    $.each(data.beauty, function(i, data) {
        var img = "<li><img class='" + data.class + "' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
        $(".albumsList").append(img);
    });
});​

動的にする必要があります。「beauty」の代わりに、カテゴリを保持する変数を挿入しようとしました。

 $.each(data.beauty, function (i, data)

しかし、うまくいかないか、間違った方法で行いました。動的にする方法はありますか、おそらく私のjsonファイルはそのようなニーズに合っていませんか?

2 つ目は、ユーザーがアルバム (「ビューティー」セクション) を選択したときに、このアルバム内のすべての写真を表示したいということです。

$.getJSON("data/data.json", function(data) {
    $.each(data.beauty[0].album, function(i, data) {
        var img = "<li><img ' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
        $(".albumPhotosList").append(img).hide().fadeIn(500);
    });
});​

しかし、問題は同じです。動的にする必要があります。

本当にお世話になりました。いろいろありがとう！

4

1 に答える 1

0

最初の問題については、ユーザーがリンクをクリックしたときに、リンク テキストを (またはカスタム属性を介して) 検索する json プロパティに渡すことができます。たとえば、リンクが次のようになっているとします。

<a href="#" data-jsonproperty="fashion">Fashion</a>
<a href="#" data-jsonproperty="beauty">Beauty</a>
<a href="#" data-jsonproperty="wedding">Wedding</a>

最初の問題については、スクリプトを次のように記述できます。

$(".link").click(function() {
    var jsonProperty = $(this).data("jsonproperty");
    $.getJSON("data/data.json", function(data) {
        $.each(data[jsonProperty], function(i, data) {
            var img = "<li><img class='" + data.class + "' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
            $(".albumsList").append(img);
        });
    });
});

2 番目の問題も同様に解決できます。

$.getJSON("data/data.json", function(data) {
    $.each(data[jsonProperty][0].album, function(i, data) {
        var img = "<li><img ' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
        $(".albumPhotosList").append(img).hide().fadeIn(500);
    });
});
于 2012-10-18T12:31:20.370 に答える