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

我需要让它充满活力。我试图在行中插入一个包含类别的变量，而不是“美”：

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

但它不起作用，或者我做错了。有什么办法可以使它动态化，也许我的 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);
    });
});​

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

非常感谢您的帮助。我真的很累。谢谢你变化很大！

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

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

$.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 回答