Javascript 缩略网格问题

我希望有人能看看这个页面上的缩略网格，帮助我理解为什么第一个功能，但第二个没有

两者都应该在单击时展开，但第二个中的图像只是作为常规图像链接。我假设我必须唯一地标识每个缩略图网格，以便脚本多次激活，但我不确定如何进行

---

网格取自于的一篇codrops文章。

您不能对两个

元素使用相同的ID-这就是为什么只有第一个列表有效，因为jQuery将只选择第一个出现的元素。您必须使用不同的ID（不太实用），或者只需使用一个类即可（该类应用于您希望使用效果的所有

元素）

选择器位于

grid.js

文件第167行：

var $grid = $('#og-grid'),

尝试使用其他选择器，如：

var $grid = $('.og-grid'),

---

BitFidelity，我也遇到了同样的问题，只需在缩略图中插入一个

，然后设置该类的样式（即，

display:block；margin top:200px；

---

本质上，您不需要创建网格的两个实例，只需在单个实例中插入分隔符。我使用H3s为网格的每个部分命名。希望这能有所帮助。

我在

grid.js

中创建了一个新函数，它将发现类

“og扩展”

并删除其内联css，并在

showPreview（）

函数和

initItemsEvents（）

函数中调用此函数

function removeinlinecss(){ $ ('ul li').each(function(){
    if($(this).hasClass('og-expanded')){ $(this).removeAttr("style");}});
} 

---

谢谢你，Terry。我在grid.js中更改了选择器，第二个网格现在在单击时展开，但它的一些功能似乎被破坏了。展开后箭头会固定在原位，向下推的缩略图位置不会恢复到正常的网格。我想尝试使用不同的ID，但我对javascript a非常陌生我不知道如何将新ID集成到grid.js中。