为何我的jQuery removeClass()与addClass()函数无法正常工作？

数据老陈

2026-8-12

问题分析与解决

核心问题

图标样式无法切换的根源在于**hasClass()方法的错误使用**，以及变量未声明导致的潜在逻辑冲突，虽然数据能正常写入数据库，但前端类切换的判断逻辑已经失效。

错误点拆解

hasClass()不能同时校验多个类：原代码中$clicked_btn.hasClass('fa-regular fa-heart')是错误写法，该方法一次只能传入单个类名，多类空格分隔会被识别成一个完整的类名字符串，自然匹配不到目标元素。
未声明变量导致全局污染：$clicked_btn、action、res等变量未加var/let/const声明，会成为全局变量，可能和其他代码产生冲突，干扰逻辑执行。
类切换逻辑冗余：重复写removeClass和addClass可以用更简洁的toggleClass替代，减少代码出错概率。

修正后的代码

$(document).ready(function() {
  $('.like-btn').on('click', function() {
    const post_id = $(this).data('id');
    const $clicked_btn = $(this);
    let action;

    // 单个类判断，逻辑更准确
    if ($clicked_btn.hasClass('fa-regular')) {
      action = 'like';
    } else if ($clicked_btn.hasClass('fa-solid')) {
      action = 'unlike';
    }

    $.ajax({
      url: 'user_detail.php',
      type: 'post',
      data: {
        'action': action,
        'post_id': post_id
      },
      dataType: 'json', // 直接指定返回JSON，无需手动解析
      success: function(res) {
        // 用toggleClass简化类切换逻辑
        $clicked_btn.toggleClass('fa-regular fa-solid fa-beat');
        // 保留fa-heart类，只切换样式类
        $clicked_btn.siblings('span.likes').text(res.likes);
      },
      error: function(xhr, status, error) {
        // 新增错误处理，方便排查隐性问题
        console.error('请求失败:', error);
      }
    });
  });
});