ES6类中如何通过this属性选取父容器下所有子元素实现点击全选

实现方法 #

你当前的this.children存储的是初始化时全页面匹配到的子元素DOM集合，不是传入的.child选择器字符串，因此无法直接传给querySelectorAll使用，只需要做2处调整即可：

1. 在构造函数中单独存储传入的子元素选择器字符串
2. 点击事件中直接调用存储的选择器属性查询当前父容器下的子元素

修改后完整代码 #

class Selector{
  constructor(parents, children) {
    // 存储选择器字符串备用
    this.parentSelector = parents;
    this.childSelector = 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(this.childSelector);
          children.forEach((elem) => {elem.style.border = "2px solid red"});
        })
      })
    }
  }
}

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

效果说明 #

修改后点击任意子元素时，只会为其所属的父容器下所有匹配选择器的子元素添加红色边框，不会影响其他父容器内的元素，也不需要硬编码.child类名，更换选择器时只需要修改初始化时传入的参数即可。

内容的提问来源于stack exchange，提问作者Ren Jitsm