javascript - 使用 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

这是你必须做的：

您可以查看参考以了解如何实现。

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

演示