(HTML/Js) 循环元素可见性

Question

var terminal = document.getElementById('terminal');
var vncScreen = document.getElementById('screen');
var video = document.getElementById('video');

var vncToggle = document.getElementById('vncToggle');
var termToggle = document.getElementById('terminalToggle');

termToggle.onclick = function toggleTerminal() {

  if (terminal.classList.contains('hide')) {
    terminal.classList.remove('hide'); 
    if (vncScreen.classList.contains('hide')) {} else {vncScreen.classList.add('hide')}
    if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
  } else {
    terminal.classList.add('hide'); 
    if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
  }
}

vncToggle.onclick = function toggleVNC() {

  if (vncScreen.classList.contains('hide')) {
    vncScreen.classList.remove('hide'); 
    if (terminal.classList.contains('hide')) {} else {terminal.classList.add('hide')}
    if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
  } else {
    vncScreen.classList.add('hide'); 
    if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
	}
}

.black-box {
  background: black;
  height: 500px;
  width: 500px;
  position: absolute;
}

.green-box {
  background: green;
  height: 500px;
  width: 500px;
  position: absolute;
}

.blue-box {
  background: blue;
  height: 500px;
  width: 500px;
  position: absolute;
}

.hide {
  display: none;
}

<button class="button" id="terminalToggle" title="Toggle Terminal">Toggle terminal</button>
<button class="button" id="vncToggle" title="Toggle Terminal">Toggle vnc</button>

<div id='video' class="black-box"></div>
<div id='screen' class="green-box hide"></div>
<div id='terminal' class="blue-box hide"></div>

基本上，当您单击“切换终端”时，它应该显示为蓝色，然后如果您再次单击返回黑色；当您单击“Toggle vnc”时，它应该显示为绿色，然后如果您再次单击返回黑色。如果您点击“Toggle vnc”并且它已经是蓝色的，它应该变成绿色，反之亦然（但点击“Toggle terminal”）

我目前有以下Js：

      var terminal = document.getElementById('terminal');          //video-like element
      var vncScreen = document.getElementById('screen');           //video-like element
      var video = document.getElementById('video');                //video-like element

      var vncToggle = document.getElementById('vncToggle');        //button
      var termToggle = document.getElementById('terminalToggle');  //button

      termToggle.onclick = function toggleTerminal() {
        terminal.classList.toggle('hide');
        vncScreen.classList.toggle('hide');
        video.classList.toggle('hide');
      }
      vncToggle.onclick = function toggleVNC() {
        vncScreen.classList.toggle('hide');
        terminal.classList.toggle('hide');
        video.classList.toggle('hide');
      }

和css:

.hide {
  display: none;
}

当我只有两个不同的 HTML 元素时，这种类切换方法很有效。现在有 3 个，我不确定它是否会按预期工作。

video 最初是可见的，即hide 不在其classList 中

terminal 最初是隐藏的，即hide 在其classList 中

vncScreen 最初是隐藏的，即hide 在其classList 中

当toggleTerminal() 被调用时：

• video 被隐藏
• terminal 变得可见
• vncScreen 变得可见（但不应该）

如果toggleVNC() 被调用（在toggleTerminal() 之后）：

• video 再次可见（但不应该）
• terminal 被隐藏
• vncScreen 被隐藏

请注意，如果两个函数调用仅由它们自己切换，此方法将起作用（假设我删除了toggleTerminal() 中的vncScreen.classList.toggle('hide'); 和toggleVNC() 中的terminal.classList.toggle('hide');）。

问题是我需要考虑按下termToggle 和vncToggle 的任何顺序。本质上，我的目标是“循环”这些元素：

1) 切换“选定”元素（即termToggle 对应terminal 元素的可见性&& vncToggle 对应vncScreen 元素的可见性）隐藏其余两个元素（video && @987654357 @ || terminal && video 分别）

2) “选定”元素的切换顺序不影响 1)

3) “选定”元素的第二次切换将隐藏自己和其他不是video的元素

关于如何最好地做到这一点的任何想法？

有一次我想过做一些逻辑来评估hide 是否包含在适当的classList 中，然后相应地手动添加或删除hide 类，但这对我来说似乎有点草率（idk ，也许不是？）。

Answer 1

请参阅有问题的代码 sn-p 以了解功能，Js 在此处冗余发布：

var terminal = document.getElementById('terminal');
var vncScreen = document.getElementById('screen');
var video = document.getElementById('video');

var vncToggle = document.getElementById('vncToggle');
var termToggle = document.getElementById('terminalToggle');

termToggle.onclick = function toggleTerminal() {

  if (terminal.classList.contains('hide')) {
    terminal.classList.remove('hide'); 
    if (vncScreen.classList.contains('hide')) {} else {vncScreen.classList.add('hide')}
    if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
  } else {
    terminal.classList.add('hide'); 
    if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
  }
}

vncToggle.onclick = function toggleVNC() {

  if (vncScreen.classList.contains('hide')) {
    vncScreen.classList.remove('hide'); 
    if (terminal.classList.contains('hide')) {} else {terminal.classList.add('hide')}
    if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
  } else {
    vncScreen.classList.add('hide'); 
    if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
    }
}