求助：FontAwesome SVG属性无法通过jQuery更新，点击图标this指向异常

嘿，我完全懂你现在的头疼点——用Font Awesome SVG版本时，连removeClass()这种基础操作在AJAX的success回调里都失效，而且console.log(this)的结果还让人一脸懵，这说白了就是**this的作用域跑偏**在搞鬼！

问题根源 #

在默认的AJAX回调函数里，this指向的是AJAX请求对象本身，而不是你点击的那个Font Awesome图标元素。所以你在success里用this去操作DOM，自然找不到目标元素，操作也就没法生效。

三种靠谱的解决方案 #

1. 提前保存元素引用（最兼容老项目的写法）

在点击事件里先把当前图标的引用存起来，回调里用这个引用代替this：

$('.your-icon-class').on('click', function() {
  // 把当前点击的图标元素存到变量里
  const targetIcon = this;
  
  $.ajax({
    url: '你的请求接口地址',
    method: 'POST', // 或GET，根据你的需求调整
    success: function(response) {
      // 用提前保存的targetIcon来操作DOM
      $(targetIcon).removeClass('fa-solid fa-heart');
      $(targetIcon).addClass('fa-solid fa-heart-broken');
      console.log(targetIcon); // 现在输出的就是你点击的SVG图标元素了
    },
    error: function(err) {
      console.error('请求出错啦:', err);
    }
  });
});

2. 用ES6箭头函数（简洁现代的写法）

箭头函数不会绑定自己的this，它会直接继承外层作用域的this，这样在success里直接用this就是你点击的图标：

$('.your-icon-class').on('click', function() {
  $.ajax({
    url: '你的请求接口地址',
    method: 'POST',
    // 箭头函数继承外层的this指向
    success: (response) => {
      $(this).removeClass('fa-solid fa-star');
      $(this).addClass('fa-solid fa-star-half-stroke');
      console.log(this); // 现在指向的就是点击的SVG图标
    }
  });
});

3. 配置AJAX的context选项（手动指定this指向）

直接在AJAX配置里指定回调函数的this指向当前点击的元素：

$('.your-icon-class').on('click', function() {
  $.ajax({
    url: '你的请求接口地址',
    method: 'POST',
    context: this, // 强制把回调里的this绑定为当前点击元素
    success: function(response) {
      $(this).removeClass('fa-solid fa-thumbs-up');
      console.log(this); // 同样能正确指向目标图标
    }
  });
});

额外小提示 #

你可以先在点击事件的最开头加一句console.log(this)，确认它确实是你点击的Font Awesome SVG元素，再用上面的方法把作用域传递到success回调里。另外，SVG版的图标结构和webfont版略有区别，操作时要确保选择器选中的是正确的元素（比如直接选中<svg>标签或者它的父容器）。

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