如何在Ajax的success函数中正确使用$(this)

问题核心：在jQuery的Ajax回调函数（比如success）里，默认的this指向的是Ajax的配置对象，而非触发事件的原DOM元素，所以直接用$(this)无法找到目标元素并添加类名。

下面是三种可行的解决方法：

方法1：提前保存元素引用 #

在发起Ajax请求前，把当前DOM元素的jQuery对象存到变量里，回调函数直接使用这个变量：

var $target = $(this);
var product_id = $target.data("product_id");

var url = "{{ route('client.add_wishlist')}}";

$.ajax({
  url: url,
  type: "POST",
  dataType: "json",
  data: {
    product_id: product_id,
    _token: "{{ csrf_token() }}",
  },
  success: function (data) {
    $target.addClass("wishlist-comp-saved");
  },
});

方法2：配置Ajax的context属性 #

通过context指定回调函数的上下文为原DOM元素，这样回调里的this就会指向目标元素：

var product_id = $(this).data("product_id");

var url = "{{ route('client.add_wishlist')}}";

$.ajax({
  url: url,
  type: "POST",
  dataType: "json",
  context: this, // 指定回调的上下文为当前元素
  data: {
    product_id: product_id,
    _token: "{{ csrf_token() }}",
  },
  success: function (data) {
    $(this).addClass("wishlist-comp-saved");
  },
});

方法3：使用ES6箭头函数 #

箭头函数不会绑定自身的this，会继承外层作用域的this，适合支持ES6语法的项目：

var product_id = $(this).data("product_id");

var url = "{{ route('client.add_wishlist')}}";

$.ajax({
  url: url,
  type: "POST",
  dataType: "json",
  data: {
    product_id: product_id,
    _token: "{{ csrf_token() }}",
  },
  success: (data) => {
    $(this).addClass("wishlist-comp-saved");
  },
});

内容的提问来源于stack exchange，提问作者Shady Hesham