如何使用 Javascript 切换或取消按下按钮 onclick答案

【问题标题】：How to toggle or unpress Button onclick using Javascript如何使用 Javascript 切换或取消按下按钮 onclick
【发布时间】：2023-03-18 05:50:01
【问题描述】：

我有一个包含六个 onclick 按钮的表格 (3x2)。当我按下按钮时，按下的按钮下方会出现一个带有一些文本的窗口。窗口（或 div）一直显示，直到我再次按下相同的按钮。甚至，如果我按下另一个按钮，则该按钮下会显示另一个窗口。

我的问题：有没有办法让它在按钮之间“切换”。也就是说，如果我按下一个按钮，就会出现一个窗口 (div)，如果我按下另一个按钮，之前的窗口 (div) 就会消失并出现一个新的？

<button onclick="myFunction(1)">Button1</button>
<div id="myDIV1" style="display:none">
"the window with text to be shown"
</div>

<button onclick="myFunction(2)">Button2</button>
<div id="myDIV2" style="display:none">
"the window with text to be shown"
</div>

<script>
function myFunction(num) {
    var str1= "myDIV"
    var str2 = num.toString();
    var result = str1 + str2
    var x = document.getElementById(result);
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}
</script>

【问题讨论】：

标签： javascript html function button onclick

【解决方案1】：

如果您必须处理大量元素来切换，可能且有效的解决方案是存储先前切换的 html 元素 ref，并在用户单击另一个按钮时将其隐藏。

var previouslyToggled

function myFunction(num) {
  var result = "myDIV" + num.toString();
  var x = document.getElementById(result);
  
  if (previouslyToggled && previouslyToggled !== x) {
    previouslyToggled.style.display = 'none'; 
  }
  
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
  
  // Store element ref
  previouslyToggled = x
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button onclick="myFunction(1)">Button1</button>
  <div id="myDIV1" style="display:none">
  "the window with text to be shown for btn 1"
  </div>
  <button onclick="myFunction(2)">Button2</button>
  <div id="myDIV2" style="display:none">
  "the window with text to be shown for btn 2"
  </div>
</body>
</html>

【讨论】：

感谢您的重播。如果我按下旧按钮，下划线文本应该会消失。如果我按下一个新按钮，旧文本应该会消失并出现一个新文本。但我无法做到这一点。任何进一步的帮助！
@moh19814 是的，错过了。检查我的答案更新。
@moh19814 很高兴为您提供帮助。如果它解决了您的问题，也不要忘记将答案标记为正确。

【解决方案2】：

我认为在纯 Javascript 中，当您使用另一个按钮以使其正常工作时，您需要再次将所有其他按钮的显示类型设置为无。

【讨论】：

【解决方案3】：

您可以在按钮下显示 div 之前隐藏所有 div。示例：

getElementsByTagName("div").style.display = "none";
x.style.display = "block";

【讨论】：

感谢您的信息。我试图这样做，但到目前为止，我按下任何按钮，一切都消失了。问题是我的页面上有很多其他的东西（和 div）。我只希望某些 div 消失。

【解决方案4】：

根据 HTML 的结构，您可以使用nextElementSibling 定位被点击按钮的下一个 div 元素：

function myFunction(btn) {
  document.querySelectorAll('button + div').forEach(function(d){
    d.style.display = 'none'; // hide all
  });
  btn.nextElementSibling.style.display = 'block'; // show div only next to the button clicked
}

button{
  display: block;
  margin: 10px;
}
button+div{
  display:none; 
}

<button type="button" onclick="myFunction(this)">Button1</button>
<div id="myDIV1">
"the window with text to be shown"
</div>
<div id="">
.....1111
</div>
<button type="button" onclick="myFunction(this)">Button2</button>
<div id="myDIV2">
"the window 2 with text to be shown"
</div>
<div id="">
.....2222
</div>

【讨论】：

感谢您的信息。我试图这样做，但到目前为止，我按下任何按钮，一切都消失了。问题是我的页面上有很多其他的东西（和 div）。我只希望某些 div 消失。
@moh19814，没有看到所有的html真的很难回答。虽然选择器button + div 应该可以工作.....尝试更新的代码:)