带有 querySelectorAll 的 lightgallery.js

Question

我正在尝试在几个类中使用 querySelectorAll 运行 lightgallery.js 脚本（纯 JS 版本），但无济于事。

这是我正在使用的代码：

var lg = document.querySelectorAll( '.gallery-1, .gallery-2, .gallery-3');
for ( var i = 0; i < lg.length; i++ ) {
    lightGallery( lg[i], {
        selector: '.gallery-item > a:has(img)',
        mode: 'lg-fade',
        preload: 2,
        counter: false,
        download: false
    });
}

我在控制台中收到“lightGallery 未正确启动”错误。之前，我使用的是 jQuery 版本的 lightgallery 脚本，使用 $( '.gallery-1, .gallery-2, .gallery-3' ).lightGallery() 没有问题。

Answer 1

罪魁祸首是脚本中selector 选项中使用的:has()。 :has() 是一个 jQuery 扩展，不是 CSS 规范的一部分，因此不能在纯 JS 脚本中使用。

更新：

这是我现在使用的代码：

var lg = document.querySelectorAll( '.gallery-1, .gallery-2, .gallery-3');
for ( var i = 0; i < lg.length; i++ ) {
    lightGallery( lg[i], {
        selector: '.gallery-item > a[href$=".jpg"], .gallery-item > a[href$=".jpeg"], .gallery-item > a[href$=".png"], .gallery-item > a[href$=".gif"]',
        mode: 'lg-fade',
        preload: 2,
        counter: false,
        download: false
    });
}