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

Answer 2

这将为您工作。 console.log和html用于演示。

 var parentobj = document.getElementsByClassName("hollow-gallery-01")[0];
 const [modal,ctrls,slides,close,images,arrows] =
            [
                parentobj.querySelector('.modal'),
                parentobj.querySelectorAll('.control'),
                parentobj.querySelectorAll('.slide'),
                parentobj.querySelector('.close'),
                parentobj.querySelectorAll('.img-wrap'),
                parentobj.querySelectorAll('.arrow')
            ];
            
            console.log(modal.innerHTML);

<div class="hollow-gallery-01">
<div class="modal">test</div>
</div>

Answer 3

不清楚为什么在这里使用解构而不是直接分配变量，但是如果您想简化选择器，则可以获取父类，然后在其上使用querySelector。

const parent = document.querySelector('.hollow-gallery-01');

const modal = parent.querySelector('.modal');
const controls = parent.querySelectorAll('.control');

等

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

3 个答案: