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

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

2 个答案: