首先点击灯箱工作，但不是从其他画廊

Question

我已经在JavaScript中构建了一个灯箱功能，现在我正在努力让实现在同一页面上有多个画廊时工作，这是我在开发时没有考虑的功能。

为了达到预期的效果，我广泛使用数据集和数据 - * - 属性（data-index索引，data-total来存储.gallery和data-current中的图像数量{1}}用于存储.gallery中应显示的#lightbox。.gallery包含缩略图<img>的{​​{1}}包含在<figure><a>中href 1}}属性为较大的#lightbox img。

这些属性在理论上起作用，并返回正确的值和附带的代码。页面加载后，当单击其中一个库时，库将按预期工作，与其他库隔离，循环浏览库图像。

关闭灯箱并点击其他一个图库时会出现问题。在IE 11中，我在上一个{{1}的开发人员工具中收到Unable to get value of...错误行。但是，当将返回的值输出到document.querySelector时，我无法理解为什么它没有添加用于显示的console.log()类，因为当值正确并且看起来像一个有效的选择器时（和它仍然适用于首次点击的.current）：

这是JS代码的大幅缩短版本。变量和选择器也被翻译成英语，以便这里的人们能够更好地理解它。进一步了解.gallery，galleryindex，galleryindexarray，thisgallery和thisgallerya变量，这是问题的功能所在。

current

这是test demo site with further visual clarification。如果您知道任何有用的信息，请帮助我解决这个相当小的错误。

Answer 1

经过近两个小时的测试，我碰巧发现了问题。选择器中的问题是@mplungjan在评论中提到的，所以在full code中工作，尝试用正确的选择器替换下一行中的选择器（在两个控制台记录行之后）。

<强>替换

 document.querySelector("#lysboks img[data-galleriindeks='" + galleriindeks + "']
 :nth-of-type(" + gjeldende + ")").classList.add("current");

按

 document.querySelectorAll("#lysboks img[data-galleriindeks='" + galleriindeks + "']").item(gjeldende-1).classList.add("current");

现在你应该可以看到图片了，但是下一张和以前的图片还没有用。

要修复导航（下一个和上一个）按钮，您必须替换gå()功能中的以下行以获得正确的选择器。

替换：

document.querySelector("#lysboks img[data-galleriindeks='" + document.querySelector
(".galleri[data-gjeldende]").dataset.indeks + "']:nth-of-type(" + destinasjon + ")").
classList.add("current");

通过：

document.querySelectorAll("#lysboks img[data-galleriindeks='" + document.querySelector(".galleri[data-gjeldende]").dataset.indeks + "']").item(destinasjon-1).classList.add("current");

现在它应该可以正常工作（在谷歌浏览器中测试）。我希望这有助于解决您的问题。祝你好运，周末愉快。