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>
в основном, когда вы нажимаете «Переключить терминал», он должен отображаться синим цветом, а затем, если вы нажмете снова go, снова станет черным; когда вы нажимаете «Toggle vn c», он должен отображаться зеленым цветом, а затем, если вы нажмете снова go, снова станет черным. Если вы нажмете «Toggle vn c» и он уже синий, он должен стать зеленым и наоборот (но нажав «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 соответствует видимости * Элемент 1083 *) скрывает два оставшихся элемента (video && vncScreen || terminal && video соответственно)
2) Порядок переключения «выбранных» элементов не влияет на 1)
3) Второй переключатель «выбранного» элемента скроет себя и другой элемент, который не является video
Любые идеи о том, как лучше всего выполнить sh это?
В какой-то момент я подумал о создании некоторой логики c, которая оценивала бы, содержится ли hide в соответствующих classList, и просто вручную добавляла или удаляла класс hide соответственно, но это казалось неаккуратным для меня (ИДК, может быть, нет?).