(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不在其内部classList

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

vncScreen最初是隐藏的，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 {}    }}