Question

我正在创建一个页面，并且每个页面上都有多个表单。表单是隐藏的，但每个表单都有一个链接。当用户单击具有关联表单的链接时，使用colorbox.js将该表单在灯箱中弹出打开。当页面上只有一个表单但是我不知道如何在一个页面上创建适用于多个表单的脚本时，我可以使用它。我的剧本是：

   <script>
    jQuery(document).ready(function() {
        $(".myForm").hide();

        $(".link_to_form").click(function() {
            $(".myForm").show();
        });

        $(".link_to_form").colorbox({ 
            width: "50%", 
            inline: true,
            opacity: ".5", 
            href: ".myForm", 
            onClosed: function() {
                $(".myForm").hide();
            }

            });
    });
    </script>

用户点击的链接有一个“link_to_form”类，实际表单位于“myForm”类的div中。每个表单还具有与之关联的特定ID。因此，当用户点击“注册”表单时，需要弹出与该表单关联的表单。现在，如果用户点击指向任何表单的链接，则在灯箱中打开所有表单。

Answer 1

基本上，您绑定了一个click事件，该事件在DOM中找到的所有.myForm匹配上调用show（）。你真正要做的是将事件绑定到DOM中的所有.link_to_form匹配，并使click事件只打开与点击相关的事件。

这样做的好方法是：

<div class="form_1">
   <a href="#" id="form_open_button">Open Form</a>
   <form class="my_form_class'>
   </form>
</div>

<div class="form_2">
   <a href="#" id="form_open_button">Open Form</a>
   <form class="my_form_class'>
   </form>
</div>

$('.form_open_button').click(
function() {
   $(this).next().toggle();
});

但你必须确保在主持人之后立即保留你的表格。如果它们不是立即的，请将next（）更改为：

$(this).next('.my_form_class').toggle()

Answer 2

$(".link_to_form").click(function() {
    $(this).prev(".myForm").show();
});

Answer 3

您可以向链接添加数据属性，使其看起来像

<a href='#' class="formLinks" data-form-id="form1" id="lnk_1">show</a>
<form id="form1"></form>

然后
你的脚本将是

$('.formLinks').click(function(){
var formid =$(this).data('form-id');
$('#'+formid).show();
});

在一个页面上隐藏多个表单并使用特定链接打开它们

3 个答案: