无法可靠地使用jQuery隐藏和显示元素

Question

我试图单击某个图标时出现一些文本，而在按下空格键时消失。目前，它始终显示，但只有在按空格之前单击页面后，它才会消失。任何帮助将不胜感激。

function solution() {
  $("#solution").removeClass("solutionHide");
  $("#solution").html(originalAlg);
}

document.onkeyup = function(event) {
  if (event.keyCode == 32) {
      $("#solution").addClass("solutionHide");
  }
}

#solution {
  font-size: 50px;
  color: white;
  font-family: 'Roboto', sans-serif;
  background-color: green;
  border: solid 5px green;
  margin-bottom: 10%;
}

.solutionHide {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id='solution' class='solutionHide'></h1>

<input id='cubeIcon' type='image' src='cubeicon.png' onclick='solution();' />

Answer 1

function solution() {
originalAlg = "SOME TEXT";
  $("#solution").removeClass("solutionHide");
  $("#solution").html(originalAlg);
}

document.onkeyup = function(event) {
  if (event.keyCode == 32) {
      $("#solution").addClass("solutionHide");
  }
}

#solution {
  font-size: 50px;
  color: white;
  font-family: 'Roboto', sans-serif;
  background-color: green;
  border: solid 5px green;
  margin-bottom: 10%;
}

.solutionHide {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id='solution' class='solutionHide'></h1>

<!--<input id='cubeIcon' type='image' src='cubeicon.png' onclick='solution();' />-->
<a href="javascript:void(0);" onclick="solution();">Submit Query</a>

Answer 2

如果直接在浏览器中对其进行测试，则可以使用空格键。在此处或jsfiddle之类的代码片段工具中，输出位于iframe中。然后，您必须将窗口聚焦。

您可以使用window.focus()手动完成

const originalAlg = 'BLUB';
window.focus();

function solution() {
  $("#solution").removeClass("solutionHide");
  $("#solution").html(originalAlg);
}

document.onkeyup = function(event) {
  if (event.keyCode == 32) {
      solution();
  }
}

#solution {
  font-size: 50px;
  color: white;
  font-family: 'Roboto', sans-serif;
  background-color: green;
  border: solid 5px green;
  margin-bottom: 10%;
}

.solutionHide {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id='solution' class='solutionHide'></h1>

<input id='cubeIcon' type='image' src='cubeicon.png' onclick='solution();' />