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

Question

我需要一些帮助来理解类如何与 JavaScript 一起工作。

具体我想完成的是:具有在所有 div ID 上以相同方式运行的相同类名。

在下面的示例中，我有两个段落有一个“更多信息按钮”。我希望该按钮显示所有其他具有该类名称的 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

只有您的第一个信息部分具有 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>