0

我正在创建一个页面，并且每个页面上都有多个表单。表格是隐藏的，但每个表格都有一个链接。当用户单击带有关联表单的链接时，该表单会使用 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。因此，当用户单击“注册”表单时，需要弹出与之关联的表单。现在，如果用户点击任何表单的链接，所有表单都会在灯箱中打开。

4

3 回答 3

0

本质上，您正在绑定一个单击事件，该事件在 DOM 中找到的所有 .myForm 匹配项上调用 show()。您真正想要做的是将事件绑定到 DOM 中的所有 .link_to_form 匹配项，并让点击事件仅打开与点击相关的事件。

一个很好的方法是这样的：

<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();
});

但是您必须确保在 Anchor 之后立即保留您的表格。如果它们不是即时的，请将 next() 更改为：

$(this).next('.my_form_class').toggle()
于 2012-06-25T21:09:29.167 回答
0 
$(".link_to_form").click(function() {
    $(this).prev(".myForm").show();
});
于 2012-06-25T21:34:56.490 回答
0

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

<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();
});
于 2012-06-25T21:43:12.783 回答