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>基本上，当您单击“切换终端”时，它应显示为蓝色，然后再次单击将返回黑色。当您单击“切换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 变得隐藏 请注意，如果两个函数调用中的任何一个仅由它们自己切换，则此方法将起作用（前提是我vncScreen.classList.toggle('hide');在toggleTerminal()和terminal.classList.toggle('hide');中删除了toggleVNC()）。
问题是我需要考虑按termToggle和的任何按钮顺序vncToggle。本质上，我的目标是“循环”这些元素，以便：
1）切换“选定”元素（即termToggle对应于terminal元素的可见性&&vncToggle对应于vncScreen元素的可见性）隐藏了其余两个元素（分别为video&& vncScreen|| terminal&&& video）
2）“选定”元素的切换顺序不影响1）
3）第二个“ selected”元素的切换将隐藏自身和其他未隐藏的元素 video
关于如何最好地做到这一点的任何想法？
曾经我考虑过要进行一些逻辑运算，以评估是否hide包含在适当classList的中，然后相应地手动添加或删除hide类，但这对我来说似乎很草率（idk，也许不是吗？）。
有关功能，请参见有问题的代码段，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 {}
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句