javascript - 如何进一步破坏所有以父类开头的变量集？

Question

我有一组解构变量，它们都具有相同的父类。有没有办法从每个中删除“hollow-gallery-01”并将其添加到解构过程中？

 const [modal,ctrls,slides,close,images,arrows] =
            [
                document.querySelector('.hollow-gallery-01 .modal'),
                document.querySelectorAll('.hollow-gallery-01 .control'),
                document.querySelectorAll('.hollow-gallery-01 .slide'),
                document.querySelector('.hollow-gallery-01 .close'),
                document.querySelectorAll('.hollow-gallery-01 .img-wrap'),
                document.querySelectorAll('.hollow-gallery-01 .arrow')
            ]

Answer 1

你可以做

const [[modal], ctrls, slides, [close], images, arrows] = ["modal", "control", "slide", "close", "img-wrap", "arrow"].map(sel =>
    document.querySelectorAll(".hollow-gallery-01 ." + sel)
);

减少重复。

<小时/>

也就是说，更好、更有效的方法(正如其他答案所建议的那样)是在父元素上使用选择器，而不是 document:

const gallery = document.querySelector('.hollow-gallery-01');
const modal = gallery.querySelector('.modal'),
      ctrls  = gallery.querySelectorAll('.control'),
      slides = gallery.querySelectorAll('.slide'),
      close = gallery.querySelector('.close'),
      images = gallery.querySelectorAll('img-wrap'),
      arrows = gallery.querySelectorAll('arrow');