jQuery：隐藏一个 div。单击按钮后显示该 div 并隐藏另一个答案

【问题标题】：jQuery: Hide a div. After clicking a button show that div and hide another onejQuery：隐藏一个 div。单击按钮后显示该 div 并隐藏另一个
【发布时间】：2015-03-26 05:12:22
【问题描述】：

我的概念是这样的： 有div-1 和div-2。 div-2 将被隐藏，div-1 将显示。在显示的div-1 中有一个button。点击button后，div-1会被隐藏，div-2会显示出来。

这是我的代码：

<div id="report-medicine">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h3>REPORT A SUSPICIOUS MEDICINE</h3>
                <form>
                    <div class="form-group medicine-information">
                        <textarea type="text" class="" placeholder="Tell Us About The Fake Medicine..."></textarea>
                        <button class="btn">Next</button>
                    </div>

                    <div class="user-information">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Your Name">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Phone Number">
                        </div>
                        <button type="submit" class="btn">Report</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
    $(".user-information").hide();
    $(".btn").click(function(){
        $(".medicine-information").hide()
        $(".user-information").show()
    });
});
</script>

但是代码不起作用：/请帮助我纠正代码。

【问题讨论】：

你是否包含了 jquery 链接？
是的，在身体的底部
medicine-inforamtion的html在哪里，你也可以分享一下吗
请检查我的答案，它会工作
以后，为了帮助那些回答您的问题的人，请具体说明您的代码有什么问题或什么不起作用.. 我认为很多人都不理解表单是在什么时候提交的按“下一步”，但你会看到的。

标签： javascript jquery html show-hide

【解决方案1】：

JQuery 内置了一个切换方法。基本上，首先将要隐藏的 div 设置为 'display: none;'然后在按钮单击时在可见和隐藏之间切换。

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#div1").toggle();
    $("#div2").toggle();
  });
});

.hidden {
  display: none;
}
#div1 {
  color: red;
  border: 1px solid black;
}
#div2 {
  color: blue;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="div1">
    <p>Hello</p>
  </div>
  <div id="div2" class="hidden">
    <p>World!</p>
  </div>
  <button id="toggle">Toggle</button>
</body>

【讨论】：

使用切换并不能解释为什么它一开始就不起作用。

【解决方案2】：

问题是如果您使用<button> 而不设置显式类型，您的表单将自动提交。

一个简单的修复：

<button class="btn" type="button">Next</button>

这将导致按钮没有默认行为，因此您可以处理单击事件而不必担心表单会提交。 Learn more.

Demo

【讨论】：

【解决方案3】：

将 jquery 链接放在脚本上方

请替换这个：-

<button class="btn">Next</button>
<button type="submit" class="btn">Report</button>

与：-

<button type="button" class="btn">Next</button>
<button type="button" class="btn">Report</button>

所以试试这个代码：-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="report-medicine">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h3>REPORT A SUSPICIOUS MEDICINE</h3>
                <form>
                    <div class="form-group medicine-information">
                        <textarea type="text" class="" placeholder="Tell Us About The Fake Medicine..."></textarea>
                        <button type="button" class="btn">Next</button>
                    </div>

                    <div class="user-information">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Your Name">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Phone Number">
                        </div>
                        <button type="button" class="btn">Report</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".user-information").hide();
            $(".btn").click(function () {
                $(".medicine-information").hide()
                $(".user-information").show()
            });
        });
    </script>
    
</body>
</html>

【讨论】：

按钮应该是一个表单。

【解决方案4】：

你有一些错别字。快速修复。

替换

  $("medicine-inforamtion").hide();
   $(".user-information").show();

有

   $(".medicine-information").hide();
   $(".user-information").show();

【讨论】：

$(document).ready(function(){ $(".user-information").hide(); $(".btn").click(function(){ $(".medicine-information").hide() $(".user-information").show() }); }); 还是不行
你也需要修正html中“medicine-inforamtion”的拼写。
分号是可选的。
你能给我提琴吗？
如果你用小提琴为我们设置了，我很乐意看看。虽然如果有换行符，分号是可选的，但我相信在这种情况下它们是最佳实践。

【解决方案5】：

您在第一个 div 中使用表单操作.. 所以页面会被刷新。你得到了与 textarea 相同的页面。尝试使用 Ajax Onclick

【讨论】：

【解决方案6】：

请使用：-

$(".medicine-inforamtion").hide();

类名不同
使用“.”在选择器中选择一个类。

【讨论】：

【解决方案7】：

您当前的代码只会在第一次点击时起作用（一个 div 将被隐藏，另一个显示出来）。但是之后的点击只会继续将已经隐藏的 div 设置为隐藏并显示将继续显示。幸运的是，jquery 有一种方法来显示是否隐藏，如果显示则隐藏。切换

$(document).ready(function(){
    $(".user-information").hide();
    $(".btn").click(function(){
        $(".medicine-information").toggle()
        $(".user-information").toggle()
    });
});

【讨论】：

如果你这样做，在提交表单之前它会再次显示第一个div。