在 JavaScript 中单击按钮时如何显示元素

Question

我尝试创建代码，在单击按钮时显示元素，它实际上可以使它们显示，但我希望它们在每个按钮上单独显示，（我想在单击其他按钮时隐藏其他元素），我需要修复哪里？

function button1() {
  'use strict';
 document.getElementById("red1"). className = "red1" ;
 document.getElementById("blue1"). className = "blue1" ;
}



function button2(){
  'use strict';
  document.getElementById("red2"). className = "red2" ;
  document.getElementById("blue2"). className = "blue2" ;
}

function button3(){
  'use strict';
  document.getElementById("red3"). className = "red3" ;
  document.getElementById("blue3"). className = "blue3" ;
}

function button4(){
  'use strict';
  document.getElementById("red4"). className = "red4" ;
  document.getElementById("blue4"). className = "blue4" ;
}


function button5(){
  'use strict';
  document.getElementById("red5"). className = "red5" ;
  document.getElementById("blue5"). className = "blue5" ;
}

function button6(){
  'use strict';
  document.getElementById("green6"). className = "green6" ;
  document.getElementById("red6"). className = "red6" ;
  document.getElementById("blue6"). className = "blue6" ;
}


function init(){
  'use strict';
  document.getElementById("btn1").addEventListener("click",button1);
  document.getElementById('btn2').addEventListener('click',button2);
  document.getElementById('btn3').addEventListener('click',button3);
  document.getElementById('btn4').addEventListener('click',button4);
  document.getElementById('btn5').addEventListener('click',button5);
  document.getElementById('btn6').addEventListener('click',button6);
}

window.onload = init;

.hidden{
  display: none;
}

.red1{
  width: 600px;
  height: 600px;
  background-color: red;
}

.blue1{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top: -600px;
}

.red2{
  width: 600px;
  height: 600px;
  background-color: red;
}

.blue2{
  width: 300px;
  height: 300px;
  background-color: blue;
}


.red3{
  width: 600px;
  height: 600px;
  background-color: red;
}

.blue3{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-left:600px;
  margin-top: -600px; 
}



.red4{
  width: 600px;
  height: 600px;
  background-color: red;
  margin-left: 300px;

}

.blue4{
  width: 300px;
  height: 300px;
  background-color: blue; 
  position: absolute;
  margin-top: -400px;
}

.red5{
  width: 600px;
  height: 600px;
  background-color: red;
  position: absolute;
  z-index: 10;
}

.blue5{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top:36px;
  margin-left: 45px;
  position: absolute;
  z-index: 40;
}


.red6{
  width: 600px;
  height: 600px;
  background-color: red;
  position: absolute;
  z-index: 20;

}

.blue6{
  width: 300px;
  height: 300px;
  background-color: blue;
  z-index: 100;
  position: absolute;

}



.green6{
  width: 900px;
  height: 700px;
  background-color: green;
  margin-top: 0;
  z-index: 10;
  position: absolute;
  
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
    <title>2 Boxes</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<div id="outer">
<h2>Boxes</h2>
  <form id="myForm">
    <fieldset>
      <label>Blue box sits inside the red box</label>
      <button type="button" id="btn1">Click</button>
    </fieldset>
    <fieldset>
      <label>Blue box sits under the red box</label>
      <button type="button" id="btn2">Click</button>
    </fieldset>
    <fieldset>
      <label>Blue box sits to the right of the red box</label>
      <button type="button" id="btn3">Click</button>
    </fieldset>
    <fieldset>
      <label>Red box sits to the right of the blue box</label>
      <button type="button" id="btn4">Click</button>
    </fieldset>
    <fieldset>
      <label>Blue box sits inside the red box and move the blue box 20px down and 45 pixels to the right of the top left hand corner of the red box</label>
      <button type="button" id="btn5">Click</button>
    </fieldset>
    <fieldset>
      <label>Green box around both the blue and red boxes</label>
      <button type="button" id="btn6">Click</button>
    </fieldset>
  </form>
</div>

    <div id="button1" >
    <p  id="red1" class="hidden"></p>
    <p  id="blue1" class="hidden"></p>
  </div>

  <div id="button2">
    <p id="red2" class="hidden"></p>
    <p id="blue2" class="hidden"></p>
  </div>

  <div id="button3">
    <p id="red3" class="hidden"></p>
    <p id="blue3" class="hidden"></p>
  </div>

  <div id="button4">
    <p id="red4" class="hidden"></p>
    <p id="blue4" class="hidden"></p>
  </div>

  <div id="button5">
    <p id="red5" class="hidden"></p>
    <p id="blue5" class="hidden"></p>
  </div>

  <div id="button6">
    <p id="red6" class="hidden"></p>
    <p id="blue6" class="hidden"></p>
    <p id="green6" class="hidden"></p>
  </div>
</body>
</html>

Answer 1

我更愿意编写一个附加函数，它隐藏所有元素并在其他函数的开头调用该函数。示例：

function hideAll() {
 document.getElementById("red1").className = "hidden" ;
 document.getElementById("blue1").className = "hidden" ;
 ...
}

在其他函数中调用该函数。示例：

function button1() {
 hideAll();
 document.getElementById("red1").className = "red1" ;
 document.getElementById("blue1").className = "blue1" ;
}

现在您还必须调整其他 CSS 规则以删除 display: none，如下所示：

.red1{
  width: 600px;
  height: 600px;
  background-color: red;
  display: block;
}

.blue1{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top: -600px;
  display: block;
}
 ...

切记，这种编程方式非常低效，有很多方法可以重构此代码以提高可读性和适应性。

在 JavaScript 中单击按钮时如何显示元素

how to show elements when button was clicked in JavaScript

html

javascript

css

event-handling