jquery - 无法使用 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>