slideUp单个元素

Question

我正在使用jQuery/Ajax脚本提交表单，而无需重新加载页面。我在页面上有多个表单，它们都有相同的类(没有id)。这样可以很好地使用以下命令提交表单：

    $('document').ready(function()
{
    $('.form').ajaxForm( {
        success: function() {
            //$('.form').addClass("clicked");
            //$(this).slideUp('fast');
        }
    });
});

但是，一旦我想要做一些事情，当提交成功时，似乎没有一种方法来引用所提交的表单。使用this运算符是有意义的，但它不起作用。我想做这样的事情：

$(this).slideUp('fast');

根据提交的表单，分别为每个元素创建。(使用.form作为选择器不起作用，因为它隐藏了所有表单)。

我尝试在表单中添加一个类(尽管似乎也不能引用正确的元素)，然后使用它来调用slideUp函数。

谢谢

Answer 1

您正在使用的ajaxForm插件在成功回调中提供了对表单的引用：

success: function (responseText, statusText, xhr, $form) {
    $form.slideUp("fast");
}

文档：http://jquery.malsup.com/form/#ajaxForm

如果你不使用这个插件，你必须自己维护这个引用。一种流行的方法是通过将其赋值给self来保留对适当this的引用

$(".form").on("submit", function () {
    var self = this;
    $.ajax({
        success: function () {
            $(self).slideUp();
        }
    });
});

Answer 2

这个插件为你提供了另一个方法-- ajaxSubmit() --它的用法如下：

$('.form').submit(function() { 
    var $form = $(this);
    $form.ajaxSubmit({
        success: function() {
            $form.addClass("clicked").slideUp('fast');//or whatever
        }
    });     
    return false; //suppress natural form submission
});