首先点击灯箱作品，而不是来自其他画廊

Question

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

为了达到预期的效果，我广泛使用数据集和 data-*-attributes（data-index 来索引，data-total 来存储 .gallery 和 data-current 中有多少张图片来存储哪个@应该显示在#lightbox 中的987654330@。带有缩略图<img>s 的.gallery 被包裹在<figure><a> 中，带有href 属性到更大的#lightbox img。

这些属性在理论上有效，并通过随附的代码返回正确的值。页面加载后，当单击其中一个画廊时，画廊按预期工作，与其他画廊隔离，循环浏览画廊图像。

关闭灯箱并单击其他画廊之一时出现问题。 在 IE 11 中，我在开发人员工具的最后 document.querySelector 行中收到 Unable to get value of... 错误。但是，当将返回的值输出到 console.log() 时，我不明白为什么它不添加用于显示第一次点击的.gallery):

这是 JS 代码的一个大大缩短的版本。变量和选择器也被翻译成英文，以便这里的人们可以更好地理解它。仔细查看 galleryindex、galleryindexarray、thisgallery、thisgallerya 和 current 变量，这是解决问题的功能所在。

var lightbox = document.createElement('div'),
    gallerya = document.querySelectorAll(".gallery a"),
    current, img, i, galleryindexarr = [];
for (i = 0; i < gallerya.length; i++) {
    gallerya[i].addEventListener("click", function(e) {
        e.preventDefault();
        var galleryindex = this.parentNode.parentNode.dataset.index,
            thisgallery = document.querySelector(".gallery[data-index='" + galleryindex + "']"),
            thisgallerya = document.querySelectorAll(".gallery[data-index='" + galleryindex + "'] a");
        if(!document.getElementById("lightbox")) {
            lightbox.id = "lightbox";
            document.body.insertBefore(lightbox, document.body.firstChild);
        }
        if(galleryindexarr.indexOf(galleryindex) == -1) {
            galleryindexarr.push(galleryindex);
            for (i = 0; i < thisgallerya.length; i++) {
                img = document.createElement("img");
                img.src = thisgallerya[i].href;
                img.dataset.index = galleryindex;
                lightbox.appendChild(img);
            }
        }
        current = [].indexOf.call(thisgallery.childNodes, this.parentNode);
        document.querySelector("#lightbox img[data-index='" + galleryindex + "']:nth-of-type(" + current + ")").classList.add("current");
    });
}

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

Answer 1

经过将近两个小时的测试，我碰巧发现了问题。在 cmets 中提到的 @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");

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