在一頁上隱藏多個表單並使用特定鏈接打開它們

Question

我正在創建一個頁面，並且每個頁面上都有多種形式。 表單是隱藏的，但是每個表單都有一個鏈接。 當用戶單擊具有關聯表單的鏈接時，該表單將使用colorbox.js在lightbox中彈出。 當頁面上只有一種表單時，我可以使用它，但是我不知道如何在一個頁面上創建適用於多種表單的腳本。 我的腳本是：

   <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

您可以將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();
});