隐藏/显示具有相同类的所有div ID上的内容

Question

我需要一些帮助来理解类如何使用JavaScript。

具体来说，我想要完成的是：在所有div ID上使用相同的类名。

在下面的示例中，我有两个段落，其中包含“更多信息按钮”。 我希望该按钮显示具有该类名称的所有其他div上的隐藏内容。 然而，它只揭示了第一个div的内容，而不是第二个div的内容。
为什么会这样？

 function infobtn() { var s = document.querySelector(".info"); if (s.style.display === "block") { s.style.display = "none"; } else { s.style.display = "block"; } } 

 #paragraph { float: left; width: 50%; height: auto; margin: 5% 20% 5% 0%; padding: 0% 0% 0% 0%; } #paragraph p { background: rgba(200, 200, 200, 0.5); width: 98%; height: auto; color: black; padding: 1% 1% 1% 1%; float: left; overflow: hidden; margin: 0% 1% 5% 0%; text-align: center; } #paragraph .info { width: 100%; height: auto; display: none; float: left; overflow: hidden; transition: 0.5s ease-in-out; background: rgba(255, 255, 255, 1); border-radius: 0px 0px 10px 10px; } #paragraph h4 { color: white; background: rgba(50, 50, 50, 1); width: 100%; height: auto; text-align: center; padding: 1% 0% 1% 0%; margin: -4% 0% 0% 0%; float: left; border-radius: 5px; } #paragraph2 { float: left; width: 50%; height: auto; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; } #paragraph2 p { background: rgba(200, 200, 255, 0.5); width: 99%; height: auto; color: black; padding: 1% 1% 1% 1%; float: left; overflow: hidden; margin: 0% 1% 5% 0%; text-align: center; } #paragraph2 .info { width: 100%; height: auto; display: none; float: left; overflow: hidden; transition: 0.5s ease-in-out; background: rgba(255, 255, 255, 1); border-radius: 0px 0px 10px 10px; } #paragraph2 h4 { color: white; background: rgba(50, 50, 50, 1); width: 100%; height: auto; text-align: center; padding: 1% 0% 1% 0%; margin: -4% 0% 0% 0%; float: left; border-radius: 5px; } 

 <div id="paragraph"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et, tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus. Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p> <h4 onclick="infobtn()"> More info</h4> <div class="info"> <h1> More info...</h1> </div> </div> <div id="paragraph2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et, tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus. Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p> <h4 onclick="infobtn()"> More info</h4> <div id="class"> <h1> More info...</h1> </div> </div> 

Answer 1

根据文档， document.getQuerySelector只获取与该选择器匹配的第一个元素。 您的代码只能处理第一个元素。

此外，阅读您的代码，您只有一个带有类info段落。 所以它只会影响那一段。

也就是说，如果要获取具有相同类名的所有元素，请使用document.getElementByClassName函数。

function infobtn() {
  var s = document.getElementsByClassName(".info");
  var i;
  for (i = 0; i < s.length; i++) {
    if (s[i].style.display === "block") {
      s[i].style.display = "none";
    } else {
      s[i].style.display = "block";
    }
  }
}

总而言之，使用JQuery可以更好地解决您尝试做的事情。 当您获得更多JavaScript经验时，我建议您使用该库。

Answer 2

只有您的第一个信息部分才有类info 。 我不确定你要用id="class"做什么。

此外， document.querySelector选择具有给定选择器的第一个元素，以选择所有需要使用getElementsByClassName元素。 然后你只需要添加一个for循环来遍历所选元素，参见编辑的片段：

 function infobtn() { var s = document.getElementsByClassName("info"); for (var i = 0; i < s.length; i++) { if (s[i].style.display === "block") { s[i].style.display = "none"; } else { s[i].style.display = "block"; } } } 

 #paragraph { float: left; width: 50%; height: auto; margin: 5% 20% 5% 0%; padding: 0% 0% 0% 0%; } #paragraph p { background: rgba(200, 200, 200, 0.5); width: 98%; height: auto; color: black; padding: 1% 1% 1% 1%; float: left; overflow: hidden; margin: 0% 1% 5% 0%; text-align: center; } #paragraph .info { width: 100%; height: auto; display: none; float: left; overflow: hidden; transition: 0.5s ease-in-out; background: rgba(255, 255, 255, 1); border-radius: 0px 0px 10px 10px; } #paragraph h4 { color: white; background: rgba(50, 50, 50, 1); width: 100%; height: auto; text-align: center; padding: 1% 0% 1% 0%; margin: -4% 0% 0% 0%; float: left; border-radius: 5px; } #paragraph2 { float: left; width: 50%; height: auto; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; } #paragraph2 p { background: rgba(200, 200, 255, 0.5); width: 99%; height: auto; color: black; padding: 1% 1% 1% 1%; float: left; overflow: hidden; margin: 0% 1% 5% 0%; text-align: center; } #paragraph2 .info { width: 100%; height: auto; display: none; float: left; overflow: hidden; transition: 0.5s ease-in-out; background: rgba(255, 255, 255, 1); border-radius: 0px 0px 10px 10px; } #paragraph2 h4 { color: white; background: rgba(50, 50, 50, 1); width: 100%; height: auto; text-align: center; padding: 1% 0% 1% 0%; margin: -4% 0% 0% 0%; float: left; border-radius: 5px; } 

 <div id="paragraph"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et, tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus. Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p> <h4 onclick="infobtn()"> More info</h4> <div class="info"> <h1> More info...</h1> </div> </div> <div id="paragraph2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et, tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus. Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p> <h4 onclick="infobtn()"> More info</h4> <div class="info"> <h1> More info...</h1> </div> </div>