javascript - 我怎样才能修复这个按钮

Question

当我单击任何按钮时，它会显示相同的第一个按钮输出。我该如何解决。当我单击不同的按钮时，我希望它有所不同，它应该显示该按钮具有的相同输出。我希望它出现在我的网站上。

function myFunction() {
  var x = document.getElementById("out");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#out {
  background-color: green;
  display: none;
  border-radius: 5px;
  padding: 5px 0px 5px 5px;
  color: #fff;
}
.output:hover{
    background: black;
}
.output{
    background:#3b4fe4 ;
    color: #fff;
    border: 3px solid #fff;
    padding: 10px;
    width: 150px;
    text-align: center;
    cursor: pointer;
}
.out{
    background: green;
    color: #fff;
}

<div class="output" onclick="myFunction()">Click me</div>
<div id="out">
This is first output
</div>
<div class="output" onclick="myFunction()">Click me</div>
<div id="out">
This is second output
</div>
<div class="output" onclick="myFunction()">Click me</div>
<div id="out">
This is third output
</div>
<div class="output" onclick="myFunction()">Click me</div>
<div id="out">
This is Fourth output
</div>

标签： javascripthtmlperformance

Answer 1

试试这个：

function myFunction(e) {
      
      if (e.target.style.display === "block") {
        e.target.style.display = "none";
      } else {
        e.target.style.display = "block";
      }
    }

并且不要为多个元素提供相同的 id。id 应该始终是唯一的