隱藏/顯示具有相同類的所有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>