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

Question

试试这个ajax代码  $.ajax({     url: "../server/CustomMsg.php",     type: "POST",    data: form_data,    contentType: false,        cache: false,        processData:false,         async: true,  success: function(html) {    if (html == 1) {      $('#register_form').fadeOut('slow');      $('.loading').fadeOut();      $('.message').html('Successfully Sent ! ').fadeIn('slow');    } else       alert('Sorry, unexpected error. Please try again later.');  }});基本上，当您单击“切换终端”时，它应该显示蓝色，然后如果您再次单击，则返回黑色；当您单击“切换 vnc”时，它应该显示绿色，然后如果您再次单击，则返回黑色。如果您单击“切换 vnc”并且它已经是蓝色，它应该变成绿色，反之亦然（但单击“切换终端”）我目前有以下内容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');      }和css：.hide {  display: none;}当我只有两个不同的 HTML 元素时，这种类切换方法就起作用了。现在有 3 个，我不确定它是否会按预期工作。video最初是可见的，即hide不在其内部classListterminal最初是隐藏的，hide即位于其classListvncScreen最初是隐藏的，hide即位于其classList何时toggleTerminal()调用：video变得隐藏terminal变得可见vncScreen变得可见（但不应该）如果toggleVNC()被调用（之后toggleTerminal()）：video再次变得可见（但不应该）terminal变得隐藏vncScreen变得隐藏请注意，如果任一函数调用仅由其自身切换，则此方法将起作用（前提是我删除了vncScreen.classList.toggle('hide');intoggleTerminal()和terminal.classList.toggle('hide');in toggleVNC()）。问题是我需要考虑 和 按钮按下的任何termToggle顺序vncToggle。本质上，我的目标是“循环”这些元素，以便：1) 切换“选定”元素（即termToggle对应于terminal元素的可见性 &&vncToggle对应于vncScreen元素的可见性）隐藏其余两个元素（分别为video&& vncScreen|| terminal&& video）2) “选定”元素的切换顺序不影响 1)3）“选定”元素的第二个切换将隐藏其自身以及其他未选定的元素video关于如何最好地实现这一目标有什么想法吗？有一次，我考虑做一些逻辑来评估是否hide包含在适当的中classList，然后相应地手动添加或删除hide类，但这对我来说似乎有点草率（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 {}

    }

}