fancybox可以打开一个表单类的多个实例吗

Question

 <a href=".login_form" class="the_form">click to Contact</a>


$(".the_form").fancybox({
        'scrolling'     : 'no',
        'overlayOpacity': 0.1,
        'showCloseButton'   : false,
        'onClosed'      : function() {
            $("#login_error").hide();
        }
    });






$(".login_form").bind("submit", function() {

    if ($(this).find(".name").val().length < 1 || $(this).find(".email").val().length < 1 || $(this).find(".msg").val().length < 1)  {
        $(this).find(".login_error").show();
        $.fancybox.resize();
        return false;
    }
});

我有一个循环并创建它的许多实例的表单。我想要做的是在该链接上单击打开表单的特定实例。我知道我可以通过为每个表单创建唯一的 id 来实现这一点，但是我想知道是否有更简单的方法。这段代码在理论上看起来很棒，但是 fancybox 不能与“.login_form”一起使用，只能与“#login_form”一起使用，这是一个特定的实例。

Answer 1

如果您显示一些额外的标记，我也许可以提供帮助。

但是，也许您可​​以迭代每个项目并以这种方式将精美的框绑定到它？这样，每次迭代您都可以在精美的框声明中引用表单方向？

$(".the_form").each(function(){

    $(this).fancybox({
        'content': $(this).find("someChildOfTheForm"),
        'scrolling'     : 'no',
        'overlayOpacity': 0.1,
        'showCloseButton'   : false,
        'onClosed'      : function() {
            $(this).find(".login_error").hide();
        }
    });

});

jsfiddle 上的示例来描述我正在谈论的内容......

Answer 2

另外，如果我没猜错的话，您可以使用多个选择器，如下所示

$('#id1, #id2, #id3').fancybox({
    'scrolling'     : 'no',
    'overlayOpacity': 0.1,
    'showCloseButton'   : false,
    'onClosed'      : function() {
        $(this).find(".login_error").hide();
    }
});