个人中心
gpt4 book ai didi

javascript - 单击链接时不显示表单

转载 作者：行者123 更新时间：2023-11-28 02:16:50 28 4
gpt4 key购买 nike

我有一个默认隐藏的表单。当点击一个链接时，它会显示表格。但是我的 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>

最佳答案

好的，我发布了答案，但上面的评论中有人回答了。问题是通过 console.log(formId) 调用了一个空变量，而 formId 没有被初始化或声明。谢谢

关于javascript - 单击链接时不显示表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48432027/

28 4 0
文章推荐： css - 扩展的 div 与其父级重叠 - z-index 问题
文章推荐： c++ - 按值返回是调用复制构造函数还是复制赋值运算符？
文章推荐： c++ - sqlite3 c++ 中的主键错误
文章推荐： html - 将文本内容与 div 对齐
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com