javascript - Thumbnail grid issue

Question

I was hoping someone could take a look at the thumbnail grids on this page and help me understand why the first functions but the second does not.

http://bitfidelity.com/temp/index.html

Both are supposed to expand when clicked, but the images in the second just act as regular image links. I assume I have to uniquely identify each thumbnail grid so the script activates more than once, but I'm not sure how to go about that.

The grid is taken from a codrops article at http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview.

Answer 1

您不能对两个<ul>元素使用相同的 ID - 这就是为什么只有第一个列表有效，因为 jQuery 只会选择第一个出现的位置。您将不得不使用不同的 ID（不太实用），或者只是使用一个类（即应用于<ul>您希望效果起作用的所有元素）。

选择器在您的grid.js文件中，第 167 行：

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

尝试使用不同的选择器，例如：

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

Answer 2

BitFidelity，我遇到了同样的问题，只需将 a<li class="divider">插入缩略图然后设置该类的样式（即display:block; margin-top:200px;

本质上，您只需将分隔线插入到单个实例中，而不是创建网格的两个实例。我使用 H3 为网格的每个部分命名。希望这可以帮助。

Answer 3

我创建了一个新函数grid.js，将在其中找到类"og-expanded" 并删除其内联 css 并在showPreview()函数和函数中调用此initItemsEvents()函数。

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