简单图片库的 jQuery/CSS 问题 - 第一页有加载问题答案

【问题标题】：jQuery/CSS issues with simple image gallery - first page has loading issues简单图片库的 jQuery/CSS 问题 - 第一页有加载问题
【发布时间】：2016-08-28 15:35:27
【问题描述】：

我正在制作一个从 Flickr API 中提取信息的简单图片库。基本上画廊的前提是每个页面必须容纳10张图片，并根据每个画廊中有多少张图片进行分页。当用户点击一张照片时，应该会弹出一个叠加层，其中包含一个框架中的图片。

您可以在 CodePen 上找到我的代码：http://codepen.io/anfperez/pen/QEZNEZ

我已经能够让图库在大多数情况下成功运行，但有一个例外：在第一页上，只加载了九张图片。我的理论是因为我有一些 jQuery 命令可以对 10 个 <img> 元素进行分页。在我的 HTML 中，我在 #frame div 中隐藏了一个 img 标签，该标签在用户单击图片之前一直隐藏。因此，我的 jQuery 将隐藏的 img 标签计为最多 10 张图像的一部分，并将其包含在分页系统中。如何排除第一个 img 标签？我一直在尝试使用

$('img:not(:first)')

作为我的选择器，但它不起作用。

第二个问题是，如果您点击离开到另一个页面，然后返回到第一页，您现在可以看到一个大的空白框架元素。但是，只要不单击图片，就应该隐藏该元素。关于如何使这段代码更干净的任何建议？

【问题讨论】：

标签： javascript jquery css gallery flickr

【解决方案1】：

问题是，当您在第 38 行的成功循环中设置它们时，您将分页类添加到所有 <img> 标记中。

这个：$('img').addClass("paginate")

应该是：$('#photo-list img').addClass("paginate")

这将它限制为您的照片列表 div 中的所有图像，因此它不会捕捉到您的不可见帧图像。这解决了一个问题和显示不可见框架的分页问题。您也可以将它移到循环之外，因为没有理由在每次循环迭代时对所有图像调用它。

不相关，您还应该在第 78 行添加分号。Chrome 会抛出错误，认为第一个匿名方法的返回值正在调用下一个方法。否则代码看起来很好。

【讨论】：

非常感谢您的建议！！当我在 Codepen 上编辑代码时，这种方法确实有效！然而，奇怪的是，当我在本地机器上尝试它时它不起作用。即使我指定只有#photo-list img 标签应该添加此类，#frame img div 仍会添加“分页”类。在我的本地机器上，我使用的是 jQuery 3.1.0.js，不确定这是否与它有关。 Codepen 使用 jQuery 2.2.4.js。
这很奇怪。我用我的更改导出了 codepen 并在 3.1.0 中进行了交换，它在我的机器上运行良好。您的本地副本上的标记是否不同？
实际上，没关系，它最终工作了。我认为这是一个丢失的 } 或类似的小东西。无论如何，非常感谢你！这正是我所需要的。