使用jquery显示下一个div元素

Question

我正在使用colorbox.js在灯箱中显示某些表单。页面上有多个表单，每个表单都有一个链接，可以在灯箱中打开表单。现在，灯箱将打开，但表格不会显示。这是我的jquery脚本：

jQuery(document).ready(function() {

    $('.myForm').hide();

        $('.link_to_form').click( function() { $(this).next('.myForm').show() } );

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

            });
    });

我的两种表格和两个链接的HTML是：

<a href="#" class="link_to_form">Form 1</a>
<div class="myForm">
<form></form>
</div>
<a href="#" class="link_to_form">Form 2</a>
<div class="myForm">
<form></form>
</div>

Answer 1

工作演示 http://jsfiddle.net/2anwK/3/

<强>脚本

  <script type='text/javascript' src="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/jquery.colorbox.js"></script>

  <link rel="stylesheet" type="text/css" href="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/colorbox.css">

<强>码

$('.myForm').hide();

$('.link_to_form').click(function() {
    $(this).next('.myForm').show()
});

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

});

工作图片

Answer 2

以下是您需要做的事：

您可以查看reference以了解如何实施。

<强> HTML

<a href="#myForm1" class="link_to_form colorbox">Form 1</a>
<div id="myForm1" class="myForm">
    <form>
        <p>text1</p>
    </form>
</div>
<a href="#myForm2" class="link_to_form colorbox">Form 2</a>
<div id="myForm2" class="myForm">
    <form>
        <p>text2</p>
    </form>
</div>

<强> JS

jQuery(".link_to_form").on('click', function() {
    var $self = $(this),
        $popup = $self.next('.myForm');
    $self.colorbox({
        width: "50%",
        inline: true,
        opacity: "0.5",
        onOpen: function() {
            $popup.show();
        },
        onClosed: function() {
            $popup.hide();
        }

    });
});

<强> CSS

.myForm{
    display: none;
}

DEMO