Question

我目前有以下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和一个指向我的assets文件夹的图像链接数组。我目前正在做的是我将每张专辑上的第一张图片加载为缩略图，链接到剩余图片库。因此，如果我点击一个相册缩略图，那么将加载该特定图库。

我遇到问题的是相册缩略图加载页面。接下来我需要做的是，当我点击其中一个专辑时，它会调用加载该特定的画廊。

所以我的问题是，我是否需要单独制作一个“getJSON”字样。加载图库的功能？或者我可以使用相同的＆＃39; getAlbums＆＃39;功能我已经定义了吗？

以下是我的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将被隐藏（或清除，尚未确定），并且图库将加载到同一页面上。

Answer 1

return (
  <StripeCheckout
    token={ () => { this._receiveCreditCardInfo() }}
    stripeKey={STRIPE_TEST_API_KEY} />
)

我想的是，在您通过克隆现有元素创建displayAlbum之后的displayAlbums函数中，您可以附加一个onClick处理程序。当这个被调用时 - 用户点击缩略图就会调用displayGallery。＆＃39;这＆＃39;传递给displayGallery将是点击的缩略图 - 所以你可以检查这个以获得点击的缩略图可能与你拥有的id属性有关。

我不知道你想在displayGallery中做什么？打开一个新的div？

这应该有用 - 或类似的东西。

更新

我试图弄明白你怎么做

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

其中照片是您从getJSON请求获得的JSON，您已将其传递给displayAlbums（）

基本上你应该能够将JSON的库部分传递给点击处理程序。因此，当单击缩略图时，您可以访问该JSON。我遇到了范围问题，最终得到了一个音乐会证明：JSFiddle：https://jsfiddle.net/justinwyllie/cj3h17hd/ 当然，因为你没有使用循环;你可能没有这个问题。您可以将照片直接传递给点击处理程序而不会出现问题。

另外 - 我添加“我不知道你为什么要通过克隆页面上已有的内容来创建新元素（缩略图）。我确定你知道你可以使用jQuery动态创建新的元素，例如$(displayAlbum).click(function() {displayGallery(this, photos)})。我不知道克隆方法的优缺点。

一个带有多个getJSON请求的JSON文件

1 个答案: