动态Json jquery多级图像库

我正在用多级图像库构建网站。 我使用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"
            }
         ]
      }
   ]
}

<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);
        });
    });
});

我找不到选择正确类别的方法。 假设用户点击了美女，所以我需要选择“美女”部分， 我使用此功能：

$.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);
    });
});​

但它不起作用，或者我用了错误的方法。 有没有办法让它动态化，也许我的json文件不适合这种需要

第二件事，当用户选择相册（“美女”部分）时，我想显示相册中的所有图片

$.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);
    });
});​

$.getJSON（“data/data.json”），函数（data）{
$.each（data.beauty[0]。相册，函数（i，数据）{
var img=“
”；
$（“.albumPhotosList”）.append（img.hide（）.fadeIn（500）；
});
});​

但问题是一样的，我需要它是动态的

我非常感谢你的帮助，我真的累坏了。

---

非常感谢

对于第一个问题，当用户单击链接时，可以将要查找的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"
            }
         ]
      }
   ]
}

<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);
        });
    });
});

对于第一个问题，您可以这样编写脚本：

{
   "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"
            }
         ]
      }
   ]
}

<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);
        });
    });
});

$（“.link”）。单击（函数（）{
var jsonProperty=$（this.data（“jsonProperty”）；
$.getJSON（“data/data.json”，函数（数据）{
$.each（数据[jsonProperty]，函数（i，数据）{
var img=“
”；
$（“.albumsList”）.append（img）；
});
});
});

您可以类似地解决第二个问题：

$.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);
    });
});

$.getJSON（“data/data.json”），函数（data）{
$.each（数据[jsonProperty][0]。相册，函数（i，数据）{
var img=“
”；
$（“.albumPhotosList”）.append（img.hide（）.fadeIn（500）；
});
});

您的js控制台是否会报告您尝试的第一个代码段的任何错误？只需谷歌搜索并尝试使用以下命令