javascript - 单击按钮并显示表单时如何隐藏容器？

Question

所以我正在尝试为计算机建立一个商店，我正在为它建立一个网上商店，但我遇到了一个问题。

现在我有一个容器，我希望它在我单击一个按钮时隐藏它的内容，然后需要出现一个表单，其中包含他们想要购买的名称、电子邮件和文本区域。但是如果他们单击页面上的任何位置，除了我想恢复旧内容的按钮！

我正在一个名为 Wakanda Studios 的程序中构建它，我不知道这是否有帮助，但我相信有人会找到我的答案。

快速说明：我还没有任何代码，除了我的容器！

Answer 1

试试这个，它是用 jQuery 编写的，所以你必须将 jQuery 添加到页面中，方法是放入 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>文档头，然后在页面末尾添加以下代码......

$(document).ready(function(){
    $("#button-id").click(function(){ 
        $("#container-id").hide(); 
        $("#form-id").show(); 
    });
    $(document).click(function(){
        $("#container-id").show();
        $("#form-id").hide();
    });
});

您现在要做的就是将 ID 属性添加到启动所有内容的按钮、容器和表单。

Answer 2

如果您使用 Wakanda 和 Studio 的 WAF 框架，您将选择您的按钮，转到事件选项卡并添加一个点击事件。

这将存根在包装器中，以便在单击时执行代码。

要隐藏容器，您需要容器 ID。使用它，您可以创建对小部件的 Wakanda 引用并使用“hide()”方法。

$$('yourContainerId').hide();

JQuery 也可以。