我如何以正确的方式使用 querySelector

如何解决我如何以正确的方式使用 querySelector

我希望导航栏 @Component @Validated public class MyComponent { public void myValidatedMethod(@Size(min = 1,max = 30) String input) { // method body } ) 在我点击时消失。使用 <ul>，我选择了导航栏中的所有 querySelectorAll()。然后我给它添加了一个点击事件监听器。所以当我点击它时，它应该将导航栏 <li> 的类切换为“活动”然后消失。

它适用于切换按钮，但不适用于 <ul>。

<li>

解决方法

querySelectorAll 返回一个 NodeList。您必须迭代列表并将事件侦听器添加到每个节点。

例如：

var togglebtn = document.getElementById("togglebtn");
togglebtn.addEventListener("click",function() {
  ul.classList.toggle("active");
});


var nodeList = document.querySelectorAll(".jsscrolltrigger");
var ul = document.getElementById("ul");

nodeList.forEach(node => {
  node.addEventListener("click",function() {
    ul.classList.toggle("active");
  });
})

<i id="togglebtn" class="fas fa-bars"></i>
<nav class="navbar">
  <div class="brand-title">brandName</div>
  <div class="navbar-links">
    <ul id="ul">
      <li class="jsscrolltrigger"><a href="#logo">Start</a></li>
      <li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
      <li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
      <li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</a></li>
    </ul>
  </div>
</nav>

,

当您使用 Document.querySelectorAll() 时，它不会返回单个元素。它返回一个 NodeList，您可以在该 forEach 上调用 let a = document.querySelectorAll('.jsscrolltrigger'); let ul = document.getElementById("ul"); a.forEach(function(element) { element.addEventListener('click',function(e){ e.preventDefault(); ul.classList.toggle("active"); }); }); 以循环遍历所有项目。

.active {
  border: 2px solid red;
}

<nav class="navbar">
    <div class="brand-title">brandName</div>
    <div class="navbar-links">
        <ul id="ul">
            <li class="jsscrolltrigger"><a href="#logo">Start</a></li>
            <li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
            <li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
            <li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</>
            </li>
        </ul>
    </div>
</nav>

forEach

如果您不想使用 NodeList 来执行循环，您可以通过将 Array 传递给 Array.from() 方法来强制将 Array.from(a).map(function(){ /*...*/ }); Array.from(a).filter(function(){ /*...*/ }); 视为 NavigationHelpersCommon它允许您对选定元素执行任何数组操作

goBack()