jquery在ajax请求中丢失$(this)的值

Question

嗨我正在使用jquery向数据库发出ajax请求,以便从数据库中添加和删除收藏夹.这工作正常,但我想替换锚链接中的部分href,以便用户可以在需要时再次添加/删除而不刷新页面,例如链接是如此构建的http://article.local/favourite/delete/ uniqueid因此我需要用添加替换'删除',反之亦然添加收藏夹按钮.但是我不能使用类名,否则这将适用于所有类而不是当时单击的类.

$( ".remove-favourite" ).click(function(e) {
    e.preventDefault();
    var favform = $(this).parent('.fav-form-contents');
    $(favform).append("<img src='/images/loading.gif' class='form-loader' class='loading-icon'/>");                    

 $.ajax({
         type     : "POST",
         cache    : false,
         url      : $(this).attr('href'),
         data     : $(this).serialize(),
        success  : function(data) {
             $('.loading-icon').hide();
            $(this).attr('href').replace(/delete/, 'add');
            $(this).removeClass('remove-favourite').addClass('add-favourite');
        }
      })
}); // end click function

但是我收到的错误消息如下:

Uncaught TypeError: Cannot read property 'replace' of undefined

这表明它失去了当前的项目,任何关于我做错的想法？

Answer 1

你需要保留$(this)一个变量用于回调

var $link = $(this);
$.ajax({
         type     : "POST",
         cache    : false,
         url      : $(this).attr('href'),
         data     : $(this).serialize(),
        success  : function(data) {
             $('.loading-icon').hide();
            $link.attr('href').replace(/delete/, 'add');
            $link.removeClass('remove-favourite').addClass('add-favourite');
        }
  })

this本身会发生变化,因为success回调的执行上下文与$.ajax你调用时不同$.ajax.