Javascript 一个JSON文件和多个getJSON请求

我目前拥有以下javascript文件：

$(function () {
  'use strict';
  getAlbums();
});

function getAlbums() {
  'use strict';
  var name = '',
    photos = '',
    id = '',
    displayAlbum = '',
    albumThumb = '',
    albumImage = '',
    albumCaption = '';
  $.getJSON('/assets/js/images.json', function (data) {
    var album = data.albums;
    $.each(album, function (i, item) {
      name = item.name;
      id = item.id;
      photos  = item.photos;

      displayAlbums(name, id, photos);
    });
  });
}

function displayAlbums(name, id, photos) {
  var displayAlbum = $('.templates .albums .thumb').clone(true),
      thumbnail    = displayAlbum.find('.thumbnail'),
      image        = displayAlbum.find('.thumbnail .image'),
      caption      = displayAlbum.find('.thumbnail .caption h4');

  caption.html(name);
  thumbnail.attr('id', id);
  image.attr('src', photos[0].href);
  image.attr('alt', photos[0].href);

  $('.img-container .row').append(displayAlbum);
}

function displayGallery(request) {
  'use strict';
  var test = $(request).attr('id'),
      gallery = '',
      displayImages = '';

  $('.img-container').hide();
}

JSON文件有一个相册列表，每个相册都有一个名称、ID和指向“我的资产”文件夹的图像链接数组。我目前正在做的是将每个相册上的第一张图像作为缩略图加载，该缩略图将链接到剩余图像的库。因此，如果我点击一个相册缩略图，该特定的图库将加载

我遇到的问题是专辑缩略图与页面一起加载。下一步我需要做的是使它成为这样，当我点击其中一张专辑时，它会打电话来加载特定的图库

所以我的问题是，我是否需要创建一个单独的“getJSON”函数来加载库？或者我可以使用已经定义的“getAlbums”函数吗

以下是我的json文件示例：

{
  "albums": [
    {
      "name": "Ancillary & Specialty Rooms",
      "id": 1,
      "photos": [
        {
          "href": "/assets/images/specialty rooms/1.jpg",
          "title": "image 1"
        },
        {
          "href": "/assets/images/specialty rooms/2.jpg",
          "title": "image 2"
        },
        {
          "href": "/assets/images/specialty rooms/3.jpg",
          "title": "image 3"
        },
        {
          "href": "/assets/images/specialty rooms/4.jpg",
          "title": "image 4"
        },
        {
          "href": "/assets/images/specialty rooms/5.jpg",
          "title": "image 5"
        },
        {
          "href": "/assets/images/specialty rooms/6.jpg",
          "title": "image 6"
        }
      ]
    },
    {
      "name": "Bathrooms",
      "id": 2,
      "photos": [
        {
          "href": "/assets/images/bathrooms/1.jpg",
          "title": "image 1"
        },
        {
          "href": "/assets/images/bathrooms/2.jpg",
          "title": "image 2"
        },
        {
          "href": "/assets/images/bathrooms/3.jpg",
          "title": "image 3"
        },
        {
          "href": "/assets/images/bathrooms/4.jpg",
          "title": "image 4"
        },
        {
          "href": "/assets/images/bathrooms/5.jpg",
          "title": "image 5"
        }
      ]
    }
  ]
}

我很感激能得到的任何帮助

谢谢

更新：

详细说明我希望它做什么。当用户单击要查看的库的相册时，包含相册链接的当前div将被隐藏（或清除，尚未确定），并且库将加载到同一页面上

$(displayAlbum).click(function() {displayGallery(this)})

我的想法是，在displayAlbums函数中，通过从现有元素克隆创建displayAlbum之后，可以附加onClick处理程序。当用户在缩略图中单击调用时，它将调用displayGallery传递给displayGallery的将是单击的缩略图-因此，您可以检查此项，以获取单击的缩略图可能与您的id属性无关

我不知道你想在画廊里做什么？在新部门开业

这应该行得通——或者类似的

更新：

我想知道你该怎么做

$(displayAlbum).click(function() {displayGallery(this, photos)})

其中photos是从getJSON请求中获得的JSON，该请求已传递给displayAlbums（）

基本上，您应该能够将JSON的gallery部分传递给click处理程序。因此，当单击缩略图时，您可以访问该JSON。我在scope方面遇到了问题，最终得到了一个concert的证明：JSFiddle: 当然，因为您没有使用循环；你可能没有这个问题。您可以毫无问题地将照片直接传递给单击处理程序

---

另外，我想补充一点，我不知道你为什么要通过从页面上已经存在的内容克隆来创建新元素（缩略图）。我相信您知道，您可以使用jQuery动态地创建新元素，例如

$（'#el'）。append（'''）

。我不知道你克隆方法的利弊

您已经收到了第一个请求所需的所有数据，没有理由再发送一个。我仍在尝试找出显示数据的最佳方法。现在，我倾向于在单击时隐藏相册，然后在选定的库中显示图像。我对javascript和jquery相当陌生，所以我不太确定你最后一段的意思。如果您愿意，这里有一个指向github页面的链接：以及项目的gh页面：Hi Su7。这是你的新gallery.js。它确实有效，但显然需要大量的工作。显然，你需要关闭画廊，让他们回到拇指现在。我的最后一段：将新元素添加到页面上的方法是先创建一个元素，然后克隆它。你不需要这样做。你可以这样做：$（'body'）。追加（$（''）.attr（'id'，'whatever'）。addClass（'someclass'）。单击（function（）{}））@Su7ech-顺便说一句，my displayGallery2（）中的代码就是我所说的动态创建新元素，而不是基于现有页面元素和克隆。非常感谢你的帮助！比我想的更有意义。另外，您对动态创建元素的解释现在对我来说非常有意义，并且将真正有助于保持代码的整洁。所以，再次感谢你！：）