Question

我有一个默认隐藏的表单。当点击链接时，它将显示表单。但我的jquery / javascript逻辑似乎缺少一些东西，因为控制台显示一些瞬间而且它隐藏。我在函数末尾使用了“return false”来防止页面再次加载。我希望这是正在发生的事情。无论如何，让我知道我在这里失踪了什么。继承项目http://pctechtips.org/apps/todo/的链接感谢

   /*
     * Script main body
     */
     $(document).ready(function() { 
        //hide form when doc loads first time
        $("#submit-form").hide();

        //listener for show hide form functionality
         $("#add-todo").click(function() {
            console.log(formId);
            toggleForm();
            return false; //return false to prevent page reload
         });
     });

     //functionality for show / hide form
     function toggleForm() {
        console.log(this+" clicked");
        if($("#submit-form").is(":hidden")) {
            $("#submit-form").show("slow", function() {
                console.log("form shown!");
            });
        }
        else {
            $("#submit-form").hide("slow", function() {
                console.log("form hidden!");
            });
        }   
     }

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>TodoList App</title>
    <!-- bootstrap, fontawsome cdn -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- local stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- jquery cdn -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- local javascript -->
    <script type="text/javascript" src="js/todo.js"></script>

</head>
<body>
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
          <a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
        </nav>
    <!-- /navbar -->
    <!-- todoList -->
    <div class="container">
        <div class="add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
        <a id="add-todo" class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
        <div id="submit-form" class="form-hide add-item text-center col-sm-12 col-md-12 col-lg-8">
            <form class="">
              <div class="form-group">
                <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">        
              </div>
              <div class="form-group">
                <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
              </div>
              <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>               
            </form>                 
        </div>
        <!-- horizontal line -->
            <hr>
        <!-- list items -->
        <h1 class="heading-4">Todo List Items</h1>
        <ul class="list-group mt-4 pb-4">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Cras justo odio
            <span class="badge badge-primary badge-pill">14</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Dapibus ac facilisis in
            <span class="badge badge-primary badge-pill">2</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Morbi leo risus
            <span class="badge badge-primary badge-pill">1</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Morbi leo risus
            <span class="badge badge-primary badge-pill">1</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Morbi leo risus
            <span class="badge badge-primary badge-pill">1</span>
          </li>
        </ul>
    </div>  
    </div>
</body>

</html>

Answer 1

好的我发布了答案，但有人在上面的评论中回答。问题是通过console.log（formId）调用null变量，而formId未初始化或声明。感谢

单击链接时窗体不显示

1 个答案: