我如何使用 JavaScript Class 方法中的变量检测最近的父级

Question

我有两个导航，当我点击菜单时，应该给父菜单添加一个边框。我使用 ES6 class 进行导航。我只需要一个对象即可实现此功能。现在它正在工作，因为我将 class 名称硬编码如下 e.target.closest(".one").style.border="2px solid green"; 在这里我使用 .one 而不是它，我需要需要检测最接近的 class [=15 的变量=].希望我的解释对大家有意义。如果没有，请问我，我会详细说明。希望有人能帮助我。以下是我的代码。提前致谢！

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

addBorder(){
let li = this.parent.forEach((elem)=>{
elem.addEventListener("click",(e)=>{
e.target.closest(".one").style.border="2px solid green";
})
})
}

};

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

    nav {font-family:arial;width:15rem;}
    nav ul {list-style:none;padding:0;margin:1rem;padding-left:.5rem;}
    nav ul a {color:#777;text-decoration:none;padding:.5rem;}

<nav class="one">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>


<nav class="one">
    <ul>
        <li><a href="#">Services</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</nav>

Answer 1

这是否与您正在尝试做的事情一致？添加了一个新方法来向上导航 DOM 以查找构造函数中指定的父项。从那获得它是 class 并像你一样继续......或多或少

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

  find(e) {
    let n = e.target;
    while (n.tagName.toLowerCase() != this.parent.item(0).tagName.toLowerCase()) {
      if (n.nodeName === 'BODY') return false;
      n = n.parentNode;
    }
    return n;
  };

  addBorder() {
    this.parent.forEach((elem) => {
      elem.addEventListener("click", (e) => {
        e.stopPropagation();
        e.preventDefault();

        let _cn = this.find(e).className;
        e.target.closest(`.${_cn}`).classList.add('banana')

      })
    })
  }

};

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

nav {
  font-family: arial;
  width: 15rem;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 1rem;
  padding-left: .5rem;
}

nav ul a {
  color: #777;
  text-decoration: none;
  padding: 0.5rem;
}


/* only to aid visualisation */
.banana {
  border: 5px solid green;
  background: white;
  box-shadow: 0 0 2rem yellow;
}

<nav class="one" id='a'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>


<nav class="one" id='b'>
  <ul>
    <li><a href="#">Services</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Support</a></li>
  </ul>
</nav>

我如何使用 JavaScript Class 方法中的变量检测最近的父级

How can i detect closest parent using variable inside JavaSript Class method

html

javascript

es6-class