在AJAX请求success函数中修改$(this)属性时遇到问题

你遇到的核心问题是异步AJAX回调函数里的$(this)上下文发生了变化。当你在点击事件的初始代码里用$(this)能正确拿到被点击的图标元素，但进入success回调时，这个this已经不再指向原来的图标了——它现在绑定的是AJAX请求的配置对象，所以修改属性自然没效果。

下面给你三种最常用的解决方案，挑适合你项目的就行：

方法一：提前保存$(this)到变量（兼容性最好，推荐） #

在点击事件的开头，把当前图标元素存入一个变量，后续所有操作都用这个变量代替$(this)，彻底避开上下文变化的问题：

$('.your-icon').on('click', function() {
  // 关键：提前把当前图标元素存到变量里
  const $currentIcon = $(this);
  
  // 切换为加载图标
  $currentIcon.attr('class', 'icon-loading');
  
  // 发送AJAX请求
  $.ajax({
    url: 'your-script.php',
    method: 'POST',
    data: { /* 这里传你的请求参数，比如图标ID */ },
    success: function(response) {
      // 用提前保存的变量操作元素，不再用$(this)
      if (response == 1) {
        $currentIcon.attr('class', 'icon-active');
      } else {
        $currentIcon.attr('class', 'icon-inactive');
      }
    },
    error: function() {
      // 可选：请求失败时恢复原图标，避免一直显示加载状态
      $currentIcon.attr('class', 'your-original-icon-class');
    }
  });
});

方法二：使用ES6箭头函数（简洁，需项目支持ES6） #

箭头函数不会绑定自己的this，它会继承外层作用域的this。如果你的项目允许使用ES6语法，直接把success回调改成箭头函数即可：

$('.your-icon').on('click', function() {
  $(this).attr('class', 'icon-loading');
  
  $.ajax({
    url: 'your-script.php',
    method: 'POST',
    data: { /* 请求参数 */ },
    // 用箭头函数继承外层的this
    success: (response) => {
      if (response == 1) {
        $(this).attr('class', 'icon-active');
      } else {
        $(this).attr('class', 'icon-inactive');
      }
    }
  });
});

方法三：设置AJAX的context选项（jQuery专属） #

jQuery的$.ajax提供了context参数，可以直接指定回调函数里this的指向对象：

$('.your-icon').on('click', function() {
  $(this).attr('class', 'icon-loading');
  
  $.ajax({
    url: 'your-script.php',
    method: 'POST',
    data: { /* 请求参数 */ },
    // 指定回调里的this为当前图标元素
    context: this,
    success: function(response) {
      // 这里的$(this)就还是原来的图标
      if (response == 1) {
        $(this).attr('class', 'icon-active');
      } else {
        $(this).attr('class', 'icon-inactive');
      }
    }
  });
});

额外注意事项 #

• 确保你的PHP脚本返回纯数字0或1，不要有多余的空格、HTML注释或输出，否则判断会出错。可以用echo intval($yourBooleanVar);来输出干净的结果。
• 建议加上error回调处理请求失败的情况，避免图标一直停留在加载状态。

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