在 JavaScript 中單擊按鈕時如何顯示元素
[英]how to show elements when button was clicked in JavaScript
問題描述
我嘗試創建在單擊按鈕時顯示哪些元素的代碼，它實際上可以使它們顯示，但我希望它們在每個按鈕上分別顯示，（我想在單擊其他按鈕時隱藏其他元素），我需要在哪里修理？
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>
1 個解決方案
解決方案1
0 已采納 2021-11-19 09:00:02
我寧願寫一個額外的 function，它隱藏所有元素，並在其他函數的開頭調用這個 function。 例子：
function hideAll() {
document.getElementById("red1").className = "hidden" ;
document.getElementById("blue1").className = "hidden" ;
...
}
在其他函數中調用 function。 例子：
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;
}
...
請記住，這種編程方式非常低效，並且有很多方法可以重構此代碼以提高可讀性和適應性。
ValidateForm 如何在 JavaScript 中單擊提交按鈕時驗證和顯示文本
[英]ValidateForm How to validate and show text when submit button was clicked in JavaScript
單擊按鈕時如何顯示 div 內容並隱藏其他內容 - JavaScript
[英]How to show div content and hide others when button is clicked - JavaScript
如何使用切換按鈕根據單擊的按鈕顯示元素？
[英]How to use a toggle button to show elements depending on which button was clicked?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.