如何在 ES6 类中使用 this 的帮助来选择所有元素

Posted 2023-02-18

【中文标题】如何在 ES6 类中使用 this 的帮助来选择所有元素

【英文标题】：How can i select all elements using the help of this in ES6 class

【发布时间】：2021-12-27 19:56:11

【问题描述】：

我试图只访问容器的所有子元素。我为此创建了一个 ES6 类。我需要根据我的项目要求上课的方法。我的目标是，当我单击任何子元素时，需要选择所有子元素。现在作为一个例子，当我点击任何子元素时，我给所有子元素一个红色边框。如果你看到我的代码，下面这行是我需要帮助的主要内容let children = parent.querySelectorAll(".child"); 现在我在这里使用了.child 类。但是我怎么能在这里使用this.children。完整的行应该是这样的let children = parent.querySelectorAll(this.children);。我怎样才能做到这一点。我的代码如下。如果我得到这个，它将非常有帮助。希望任何人都可以帮助我。提前致谢！

class Selector
constructor(parents, children) 

this.parents= document.querySelectorAll(parents);
this.children= document.querySelectorAll(children);

this.selectall=()=>
this.children.forEach((elem)=>
elem.addEventListener("click",(e)=>
 let parent = e.target.parentElement;
 let children = parent.querySelectorAll(".child");
 children.forEach((elem)=>elem.style.border="2px solid red");
    )
  )
 



let one = new Selector(".parent",".child");
one.selectall();

.parent font-family:Arial, Helvetica, Sans-serif;

<ul class="parent">
<li class="child">One</li>  
<li class="child">Two</li>  
<li class="child">Three</li>    
</ul>
    
    
<ul class="parent">
<li class="child">One</li>  
<li class="child">Two</li>  
<li class="child">Three</li>    
</ul>

【参考方案1】：

解决方案 1（如果 parent 的所有孩子都属于 child 类）：

代替

let children = parent.querySelectorAll(".child");

试试这个

let children = Array.from(parent.children);

解决方案 2（如果 parent 的孩子的班级不是 child）

也存储子类。

class Selector 
  constructor(parents, children) 
    this.parents = document.querySelectorAll(parents);
    this.childrenClass = children;
    this.children = document.querySelectorAll(children);

    this.selectall = () => 
      this.children.forEach((elem) => 
        elem.addEventListener("click", (e) => 
          let parent = e.target.parentElement;
          let children = parent.querySelectorAll(this.childrenClass);
          children.forEach((elem) => 
            elem.style.border = "2px solid red";
          );
        );
      );
    ;
  


let one = new Selector(".parent", ".child");
one.selectall();

【讨论】：

嗨，Akul，这太棒了，你是个了不起的人！对我来说，我从像你这样的天才开发者那里得到即时帮助对我来说非常有价值！作为帮助，您做得很好。非常感谢您的帮助！