javascript - 带有 querySelectorAll 的 lightgallery.js

Question

我正在尝试运行 lightgallery.js在几个类中使用 querySelectorAll 的脚本(纯 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

罪魁祸首是 :has()用于 selector脚本中的选项。 :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
    });
}