(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 terminal"它应该显示蓝色，然后如果你再次点击又回到黑色；当您单击 "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 元素时，这种 class 切换方法有效。现在有 3 个，我不确定它是否会按预期工作。

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

中

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

中

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

中

调用toggleTerminal()时：

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

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

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

请注意，如果其中一个函数调用仅由它们自己切换，此方法将如何工作（前提是我删除了 toggleTerminal() 中的 vncScreen.classList.toggle('hide'); 和 [=31= 中的 terminal.classList.toggle('hide'); ]).

问题是我需要考虑 termToggle 和 vncToggle 的任何按钮按下顺序。本质上我的目标是 "cycle" 这些元素使得：

1) "selected" 元素的切换（即 termToggle 对应于 terminal 元素的可见性 && vncToggle 对应于 vncScreen 元素的可见性）隐藏剩余的两个元素（分别为video && vncScreen || terminal && video）

2) "selected" 元素的切换顺序不影响 1)

3) "selected" 元素的第二次切换将隐藏自身和另一个不是 video

的元素

关于如何最好地完成此任务有什么想法吗？

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

Answer 1

查看有问题的代码片段以了解功能，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 {}
    }
}

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

(HTML/Js) Cycling element visibilities

html

javascript

css

visibility

toggle