javascript - 实现 .hide() 和 .show() 问题，两个 div 都被显示，按钮点击没有变化

Question

本质上是创建一个问答游戏，但在实现 jQuery .hide() 和 .show() 函数时遇到问题。我一直在审查其他问题，所以我的代码看起来是正确的，所以我很困惑为什么我的所有 div 仍然可见，而按钮单击没有响应。我试图通过省略我试图隐藏和显示的 div 的细节来压缩我的代码，只是为了专注于当前的问题。我只是省略了实际的问题数据和计时器功能。

//Problematic functions
$( document ).ready(function(){

$("#mainbox").hide();

$("#beginning").click(function(){

$("#begin").hide();
  $("#mainbox").show();
  startTime();

})

我试图隐藏的 Div

<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() 创建事件处理程序。