javascript - 简单图像库的 jQuery/CSS 问题 - 第一页有加载问题

Question

我正在开发一个简单的图片库，它可以从 Flickr API 中提取信息。基本上图库的前提是每页必须放10张图片，根据每个图库有多少张图片来分页。当用户点击一张照片时，应该会弹出一个叠加层，并在框架中显示图片。

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

除了一个异常(exception)，我已经能够让图库在大部分情况下成功运行:在第一页上，只加载了九张图片。我的理论是因为我有一些分页 10 <img> 的 jQuery 命令元素。在我的 HTML 中，我有一个隐藏在 #frame div 中的 img 标签，它一直隐藏到用户单击图片为止。所以我的 jQuery 将隐藏的 img 标签计为 10 个图像最大值的一部分，并将其包含在分页系统中。如何排除第一个 img 标签？我一直在尝试使用

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

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

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

Answer 1

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

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

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

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

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