javascript - 使用 JS 仅显示请求的表单

Question

如下图所示，我有两个表单和两个按钮。目前所有表格都是可见的。

我如何才能“根据他们选择的选项(从顶部的蓝色按钮)”只显示请求的表单？

因此，如果用户单击“发送邀请”按钮，将出现已发送邀请表单，蓝色按钮将消失“您可以通过单击后退按钮返回”。

是否可以通过JS使用动态ID奉献来实现？因为我在某些页面上会有 2 个以上的选项等... 例如，给出 <a class="button button-box"><p>Send an invite</p></a>一个 ID“#send-and-invite-form”，然后它将找到具有该 ID 的表单并显示它。然后隐藏包含这些框的 div，直到单击返回。

这是一个简化的 HTML 结构:

<div>
                <a class="button button-box"><p>Send an invite</p></a>
                <a class="button button-box"><p>Add manually</p></a>
            </div>

            <form data-parsley-validate>
                <fieldset>
                    <div>
                        <input name="" type="email" placeholder="Email address" required>
                    </div>
                </fieldset>
                <div class="dialog-buttons">
                    <button class="button-green" type="submit">Submit</button>
                    <a>Back</a>
                </div>
            </form>

            <form data-parsley-validate>
                <fieldset>
                    <div>
                        <input name="" type="email" placeholder="Email address" required>
                    </div>
                </fieldset>
                <div class="dialog-buttons">
                    <button class="button-green" type="submit">Submit</button>
                    <a>Back</a>
                </div>
            </form> 

Answer 1

保留两种形式 hidden首先给每个<a>一个ID还有<form>

然后

$("#id-of-btn1").click(function(){
   $("#form-1").toggle();
});

和

$("#id-of-btn2").click(function(){
   $("#form-2").toggle();
});

编辑: 这可能是一种使其完全独立于 ID/类的解决方案。

如果你给一个包含所有<a>的div类然后

$(".class-of-div a").click(function(){
     var t=$(this).index();
     $("body").find("form").hide();
     $("body").find("form:eq("+t+")").toggle();
});

这将适用于相应的 <a>和 <form>只是，所以请确保它们按顺序排列。