lightgallery.js 与 querySelectorAll

Question

我尝试运行 lightgallery.js 脚本（纯 JS 版本）使用 querySelectorAll 多次类无济于事。

这是我正在使用的代码：

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
    });
}

lightgallery.js 与 querySelectorAll

lightgallery.js with querySelectorAll

javascript

selectors-api

lightgallery