实现.hide()和.show()问题，都显示两个Div，没有更改button click

Question

实质上是创建一个琐事游戏，并在实现jQuery .hide（）和.show（）函数方面遇到问题。我一直在这里回顾其他问题，因此我的代码看起来正确，所以我对为什么我所有的DIV仍然可见，而没有按钮点击的回答感到困惑。我试图通过遗漏我要隐藏和显示的Divs的细节来凝结代码，只是为了关注当前问题。我刚刚遗漏了实际问题数据和计时器功能。

//Problematic functions
$( document ).ready(function(){
$("#mainbox").hide();
$("#beginning").click(function(){
$("#begin").hide();
  $("#mainbox").show();
  startTime();
})

divs我试图隐藏

<div id="begin" class="unhidden">
    <h1>Trivia Game</h1>
    <h2>Don't run out of time!</h2>
    <p>
    <button id="beginning">Start</button>
    </p>
    <br>
</div>  
    <div id = "mainbox" class="hidden">
    <h2>Answer the following:</h2>
    <h2 id="timer">Remaining Time: </h2>
</div>

是范围/订购问题吗？

Answer 1

您缺少一组闭合括号。您正在关闭点击事件处理程序功能，但没有准备就绪功能。

这是您的代码运行的一个示例，并具有附加的闭合支架。确保正确且缩进编写代码，以使这些错别字更容易注意到。另外，通过验证器或" linter"运行代码，以确保您编写的代码没有错误。

$(function() {
  $("#mainbox").hide();
  
  $("#beginning").on('click', function(){
    $("#begin").hide();
    $("#mainbox").show();
    startTime();
  }); // close click handler
}); // close ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="begin" class="unhidden">
  <h1>Trivia Game</h1>
  <h2>Don't run out of time!</h2>
  <p>
    <button id="beginning">Start</button>
  </p>
</div>  
<div id="mainbox" class="hidden">
  <h2>Answer the following:</h2>
  <h2 id="timer">Remaining Time: </h2>
</div>

还请注意，您不再需要$(document).ready(function() { ... });。等效的只是$(function() { ... });。此外，您应该使用.on()创建事件处理程序。