模式仅显示多个按钮上的最后一个按钮的内容

Question

我是编码的新手，希望创建三个按钮来打开三种不同的模式-到目前为止，我只打算让最后三个按钮的内容都显示出来（当我将其注释掉时，第二个按钮适用于前两个按钮，注释掉后，第一个按钮适用于第一个按钮。我试图将divs更改为classs无济于事。任何帮助，将不胜感激！

HTML：

  <!--First Button-->

  <div class="btn">
    <button id="btn-name">
      <h1>NAME</h1>
    </button>
  </div>

  <br>

  <div class="btn">
    <button id="btn-news">
      <h1>NEWS</h1>
    </button>
  </div>

  <br>

  <div class="btn">
    <button id="btn-cv">
      <h1>CV</h1>
    </button>
  </div>

  <!-- The Modal -->
  <div id="modal1" class="modal1">

    <!-- Modal content -->
    <div class="modal1-content">
      <span class="close1">&times;</span>
      <h4>ONE</h4>
      <h4>CONTACT</h4>
      <p>. . .</p>
    </div>
  </div>


  <!--Second Button-->

  <!-- The Modal -->
  <div id="modal2" class="modal2">

    <!-- Modal content -->
    <div class="modal2-content">
      <span class="close2">&times;</span>
      <h4>TWO</h4>
      <h4>CURRENTLY</h4>
    </div>
  </div>


  <!--Third Button-->

  <!-- The Modal -->
  <div id="modal3" class="modal3">

  <!-- Modal content -->
    <div class="modal3-content">
      <span class="close3">&times;</span>
        <h4>THREE</h4>
        <h4>EDUCATION</h4>
      </div>
  </div>

JS：

<script>
// Get the modal
var modal = document.getElementById("modal1");

// Get the button that opens the modal
var btn = document.getElementById("btn-name");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>


<!--Second Button-->

<script>
// Get the modal
var modal = document.getElementById("modal2");

// Get the button that opens the modal
var btn = document.getElementById("btn-news");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>


<!--Third Button-->

<script>
// Get the modal
var modal = document.getElementById("modal3");

// Get the button that opens the modal
var btn = document.getElementById("btn-cv");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close3")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

我猜想这段代码有很多冗余。 。 。乐观地，

JTE

Answer 1

您的代码的问题是，您声明了3模式和按钮的同名var modal和var btn。使用多个<script></script>并不意味着它们与其他代码分开。

请尝试使用其他名称声明。

示例代码：

<script>
// Get the modal
var modal1 = document.getElementById("modal1");

// Get the button that opens the modal
var btn1 = document.getElementById("btn-name");

// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];

// When the user clicks the button, open the modal
btn1.onclick = function() {
  modal1.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
  modal1.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal1) {
    modal1.style.display = "none";
  }
}
</script>


<!--Second Button-->

<script>
// Get the modal
var modal2 = document.getElementById("modal2");

// Get the button that opens the modal
var btn2 = document.getElementById("btn-news");

// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];

// When the user clicks the button, open the modal
btn2.onclick = function() {
  modal2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
  modal2.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal2) {
    modal2.style.display = "none";
  }
}
</script>


<!--Third Button-->

<script>
// Get the modal
var modal3 = document.getElementById("modal3");

// Get the button that opens the modal
var btn3 = document.getElementById("btn-cv");

// Get the <span> element that closes the modal
var span3 = document.getElementsByClassName("close3")[0];

// When the user clicks the button, open the modal
btn3.onclick = function() {
  modal3.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span3.onclick = function() {
  modal3.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal3) {
    modal3.style.display = "none";
  }
}
</script>

同样，如果您有这种代码。仅使用一个<script></script>。