JavaScript类方法中如何用变量查找点击事件对应的最近父级元素

解决方案 #

你可以通过以下两种方式解决硬编码问题，优先推荐第一种，利用事件绑定特性更简洁高效：

方案1：直接使用事件绑定的目标容器（最优） #

你已经将点击事件绑定在对应的导航父容器上，直接用e.currentTarget就能拿到当前被点击的导航容器，完全不需要额外查找父级：

class Navigation{
  constructor(parent) {
    this.parent = document.querySelectorAll(parent);
  }

  addBorder(){
    this.parent.forEach((elem)=>{
      elem.addEventListener("click",(e)=>{
        // 直接获取当前绑定事件的导航容器
        e.currentTarget.style.border = "2px solid green";
      })
    })
  }
};

let one = new Navigation(".one");
one.addBorder();

方案2：动态传入选择器给closest方法 #

如果你有其他场景需要用closest查找父级，可以把构造函数接收的选择器参数存为实例属性，直接传入closest即可：

class Navigation{
  constructor(parent) {
    // 把传入的选择器存为实例属性，供后续调用
    this.parentSelector = parent;
    this.parent = document.querySelectorAll(parent);
  }

  addBorder(){
    this.parent.forEach((elem)=>{
      elem.addEventListener("click",(e)=>{
        // 动态使用存储的选择器查找最近父级
        e.target.closest(this.parentSelector).style.border = "2px solid green";
      })
    })
  }
};

let one = new Navigation(".one");
one.addBorder();

额外优化建议 #

如果需要点击新导航时取消上一个导航的高亮边框，可以在添加边框前先清空所有导航容器的边框：

addBorder(){
  this.parent.forEach((elem)=>{
    elem.addEventListener("click",(e)=>{
      // 先清空所有导航的边框
      this.parent.forEach(nav => nav.style.border = 'none');
      // 给当前导航加边框
      e.currentTarget.style.border = "2px solid green";
    })
  })
}

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