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版本的光明库脚本，使用$( '.gallery-1, .gallery-2, .gallery-3' ).lightGallery()没有任何问题。

Answer 1

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

更新：

这是我现在使用的代码：

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