使用键盘键显示和隐藏 div答案

【问题标题】：Show and hide divs using keyboard keys使用键盘键显示和隐藏 div
【发布时间】：2020-04-01 10:00:13
【问题描述】：

我需要在某个 div 的显示 != none 的情况下更改 div 的显示每次点击某个键

例如：如果 Div1 display = block 并且用户按下 F7 - 然后将Div1样式更改为none，将Div2更改为block

我想出了如何做到这一点，但是在我添加更多条件之后，其中一些就被跳过了，我不知道为什么......所以我显然没有找到最好的方法

[每次按下某些键时，其他 div 需要不显示，其他显示块]

希望你能帮帮我！

*编辑：添加我最近的尝试：

if ((document.getElementById("main60_1").style.display != "none") && (hello == 1 ) && (y == 117)) {
        for (var i = 0; i < mains.length; i += 1) {
            mains[i].style.display = 'none'; /* used to hide all the divs with this class*/
        }
        for (var i = 0; i < columns.length; i += 1) {
            columns[i].style.display = 'none'; /* used to hide all the divs with this class*/
        }
        for (var i = 0; i < tks.length; i += 1) {
            tks[i].style.display = 'none'; /* used to hide all the divs with this class*/
        }
        for (var i = 0; i < f9s.length; i += 1) {
            f9s[i].style.display = 'none'; /* used to hide all the divs with this class*/
        }
        document.getElementById("column1_60").style.display = "table";
        document.getElementById("bottom_menu1").style.display = "none";
        document.getElementById("bottom_menu2").style.display = "block";
        console.log('Hi! Im column1_60');   
        y = null; /* I set y back to null each time so there wont be a chain reaction to the same key pressed */
    }

hello 是我输入的变量，y 是 keycode 的变量。

这里我需要显示“column1_60”并隐藏“main60_1”，条件是显示“main60_1”，输入值为1，用户按下F7

其余代码看起来几乎相同

【问题讨论】：

我想出了如何做到这一点，但是在我添加更多条件后，其中一些被跳过了，我不知道为什么。你能告诉我们代码？
请编辑您的问题并添加相关代码
你尝试过什么？
你能发一个minimal reproducible example
请澄清问题

标签： javascript html css

【解决方案1】：

也许这会对你有所帮助。

window.onkeydown = evt => {
  switch (evt.keyCode) {
    //u
    case 117:
      if (main60_1.classList.contains('none') && hello == 1) {
        const elementsToHide = document.querySelectorAll("mains, div.alertcolumns, tks, f9s");
        Array.from(elementsToHide).forEach((el) => {
          el.classList.add('none');
        });
        bottom_menu1.classList.add('none');
        bottom_menu2.classList.add('block');
        column1_60.classList.add('table');
      }
      break;
    //v
    case 118:
      if (!main60_1.classList.contains('none') && hello == 1) {
        const elementsToHide = document.querySelectorAll("mains, div.alertcolumns, tks, f9s");
        Array.from(elementsToHide).forEach((el) => {
        el.classList.remove('none');
      });
      bottom_menu1.classList.remove('none');
      bottom_menu2.classList.remove('block');
      column1_60.classList.remove('table');
    }
    break;
  }
};

【讨论】：