0

ページを作成していますが、各ページに複数のフォームがあります。フォームは非表示になっていますが、各フォームへのリンクがあります。ユーザーが関連付けられたフォームのリンクをクリックすると、そのフォームが colorbox.js を使用してライトボックスで開きます。ページにフォームが 1 つしかない場合でも機能しますが、1 つのページに複数のフォームがある場合に機能するスクリプトを作成する方法がわかりません。私のスクリプトは次のとおりです。

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

ただし、アンカーの直後にフォームを保持する必要があります。即時でない場合は、next（）を次のように変更します。

$(this).next('.my_form_class').toggle()
于 2012-06-25T21:09:29.167 に答える
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 に答える
0 
$(".link_to_form").click(function() {
    $(this).prev(".myForm").show();
});
于 2012-06-25T21:34:56.490 に答える