事件监听器和转换 JS答案

【问题标题】：Event listeners and transitions JS事件监听器和转换 JS
【发布时间】：2020-10-13 10:05:54
【问题描述】：

我尝试使用事件侦听器（单击）来更改多个元素的不透明度，并通过每次单击属性切换的过渡。我不知道为什么我的代码不工作并且找不到我的错误，所以我需要帮助。

window.addEventListener("load", function() {
  document.querySelector(".hamburger").addEventListener("click", function(e) {
    const con = document.querySelector(".con");
    const links = document.querySelectorAll(".nav-link");
    if (!con.classList.contains("js")) {
      con.classList.toggle("con-js");
      //forEach link (in const links) toggle the "link-toggle" class
    }
  })
})

.con-js {
  width: 100%;
  overflow: hidden;
}

.con ul li a {
  opacity: 0;
  /*transition for the opacity: opacity .8s 1s*/
}

.link-toggle {
  opacity: 1;
  /*transition for the opacity: opacity .3s 0s;*/
}

<div class="hamburger" ">
  <!--Hamburger Content-->
</div>
<div class="con ">
  <ul>
     <li><a href="index.html " class="nav-link ">A</a></li>
     <li><a href="menu.html " class="nav-link ">B</a></li>
     <li><a href="# " class="nav-link ">C</a></li>
  </ul>
</div>

【问题讨论】：

if (!con.classList.contains("js")) 如果con 已经包含一个类con-js，那么if 块内的代码将不会运行。
那有什么办法呢？
您可以尝试删除 if 条件并检查吗？

标签： javascript css css-transitions dom-events

【解决方案1】：

解决方案是 CSS 选择器的特殊性。

给定选择器.con ul li a，为了能够应用opacity: 1，您应该将选择器.link-toggle更改为.con ul li a.link-toggle。

否则，opacity: 0; 将更具体并使用而不是 opacity: 1;。

.con ul li a.link-toggle {
  opacity: 1;
  /*transition for the opacity: opacity .3s 0s;*/
}

编辑：为了切换课程，querySelectorAll 可以解决问题：

window.addEventListener("load", function() {
  document.querySelector(".hamburger").addEventListener("click", function(e) {
    const con = document.querySelector(".con");
    
    if (!con.classList.contains("js")) {
      con.classList.toggle("con-js");
      
      const links = document.querySelectorAll(".nav-link");
      
      for(const link of links){
        link.classList.toggle("link-toggle");
      } 
    }
  })
})

【讨论】：

这是我写的代码：window.addEventListener("load", function() { document.querySelector(".hamburger").addEventListener("click", function(e) { const con = document.querySelector(".con"); const links = document.querySelectorAll(".nav-link"); if (! con.classList.contains("js")) { con.classList.toggle("con-js"); for(const link of links){ link.classList.toggle("link-toggle"); } } }) }) 它不起作用:(
请帮忙？
@mattanelhiham 请看一下我写的 JSFiddle：jsfiddle.net/fvbs1p2m/1。它应该有答案
哇，你真是个了不起的人！！！感谢您抽出宝贵时间帮助我。它对我所有的项目以及未来的项目都有帮助。你不知道我有多欣赏它。再次感谢，天才:)

【解决方案2】：

您需要使用 querySelectorAll 而不是仅选择它遇到的第一个匹配元素的 querySelector。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

希望对您有所帮助！ :)

【讨论】：

它确实有帮助，但现在我如何为每个链接（在 const 链接中）切换“链接切换”类？

【解决方案3】：

问题是你把类 "nav2-link-con-js".

您在 css 中没有这样的类，而这里 (!сon.classList.contains ("js")) 您正在寻找的只是类“js”。

您需要修复类“nav2-link-con-js”。

我会这样做：

window.addEventListener("load", function() {
  document.querySelector(".hamburger").addEventListener("click", function(e) {
  const con = document.querySelector(".con");
    
  con.classList.toggle("nav2-link-con", con.classList.contains("js"));
  con.classList.toggle("js", !con.classList.contains("js"));   
  }) 
})

【讨论】：

什么？你在哪一行看到的？