Question

点击后，我运行一个函数，为每个具有.red_active类的表单提交ajax。在ajax提交之后或完成函数之后，我想删除父级的.red_active类。这就是我试过的，你能帮我发现我的错误吗？

 $('.edit_old').click(function(){
   $('.slider_edit').each(function(){
      if($(this).hasClass('red_active')){
          $(this).find('.edit_form_slide').each(function(){
                    $(this).on('submit', function(e) {

                        e.preventDefault();
                        var data = $(this).serialize();
                        var url = $(this).attr('action');
                        $.ajax({
                            type: "POST",
                            url: url,
                            data: data,
                            success: function (data) {
                                console.log('submitted '+ url);
                                //$(this).parent().removeClass('.red_active');
                            },
                            error: function () {
                                console.log('fail');
                            }
                        });
                    });
              $(this).submit();
              //$(this).submit().parent().removeClass('.red_active');
          });
      }

   });
});

Answer 1

问题是因为在success处理程序中，this关键字不像.edit_form_slide处理程序那样引用each()。您需要将this的引用存储在变量中：

 $('.edit_old').click(function () {
     $('.slider_edit').each(function () {
         var $sliderEdit = $(this);
         if ($sliderEdit.hasClass('red_active')) {
             $sliderEdit.find('.edit_form_slide').each(function () {
                 var $editFormSlide = $(this); // store 'this' in a variable
                 $editFormSlide.on('submit', function (e) {
                     e.preventDefault();
                     var data = $editFormSlide.serialize();
                     var url = $editFormSlide.attr('action');
                     $.ajax({
                         type: "POST",
                         url: url,
                         data: data,
                         success: function (data) {
                             console.log('submitted ' + url);
                             $editFormSlide.parent().removeClass('.red_active');  // to use here, within the other scope
                         },
                         error: function () {
                             console.log('fail');
                         }
                     });
                 });
                 $editFormSlide.submit();
             });
         }
     });
 });

请注意，我也为.slider_edit选择器执行了相同操作，只是为了保持一致。如果您有嵌套的this引用，那么在没有命名变量的情况下跟踪引用内容的内容会让人感到困惑。

Answer 2

首先，您可以优化并删除if和.find行

$('.slider_edit. red_active . edit_form_slide').each(function(){

具有与以下相同的效果：

$('.slider_edit').each(function(){
      if($(this).hasClass('red_active')){
          $(this).find('.edit_form_slide').each(function(){

接下来要找到一个班级的父母，最好的方法是使用.parents()，并且要注意你的函数中的this，成功函数中的this不是这是你想要的。您应该在ajax调用之前将$(this)保存在var中，并将其重用到success回调中。

完全更正：

$('.edit_old').click(function() {
    $('.slider_edit.red_active .edit_form_slide').each(function() {
        var $formSlide = $(this);

        $formSlide.on('submit', function(e) {
            e.preventDefault();
            var data = $(this).serialize();
            var url = $(this).attr('action');
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                success: function(data) {
                    $formSlide.parents('.red_active:first').removeClass('.red_active');
                },
                error: function() {
                    console.log('fail');
                }
            });
        }).submit();
    });
});

Ajax成功函数和查找父类

2 个答案: