如何为Ajax返回ID匹配的元素添加addClass类？

第一步：修正PHP代码的问题 #

你的PHP代码存在几处错误，先做调整：

1. 函数名拼写错误：verify_boos 需改为 verify_books，和Ajax请求里的action参数对应
2. 未定义变量：$favoris 替换为你获取的用户藏书数组$library
3. 必须返回JSON格式数据，WordPress中推荐用wp_send_json()确保前端正确解析

修正后的PHP代码：

function verify_books(){
    $books = $_GET['books'];
    $userId = get_current_user_id();
    $library = get_user_meta($userId, 'library', true);
    // 兼容用户未设置藏书的情况，确保$library是数组
    $library = is_array($library) ? $library : [];
    $matchedBooks = array_intersect($books, $library);
    wp_send_json($matchedBooks);
    wp_die(); // WordPress Ajax处理必须终止脚本
}

第二步：完善JS的Ajax回调逻辑 #

在success回调中，你可以用两种方式给匹配元素添加类：

方法一：批量选择（高效简洁）

利用属性选择器直接选中所有符合条件的元素，一次性添加类：

function update_b() {
  var $bookElements = $(".js-book");
  var $bookIds = $bookElements.map(function() {
    return $(this).data("id");
  }).get();

  $.ajax({
    type: 'GET',
    url: ajaxurl,
    data: {
      action: 'verify_books',
      books: $bookIds
    },
    success: function(data){
      // 先清空所有元素的激活类，避免状态混乱
      $bookElements.removeClass('is-active');
      
      if(data && data.length > 0) {
        // 生成属性选择器字符串，比如[data-id="1"],[data-id="2"]
        var selector = data.map(id => `[data-id="${id}"]`).join(',');
        // 选中匹配元素并添加类
        $(selector).addClass('is-active');
      }
    },
  });
}

方法二：遍历元素判断（直观易懂）

逐个检查每个书籍元素的data-id是否在返回数组中，符合条件则添加类：

function update_b() {
  var $bookElements = $(".js-book");
  var $bookIds = $bookElements.map(function() {
    return $(this).data("id");
  }).get();

  $.ajax({
    type: 'GET',
    url: ajaxurl,
    data: {
      action: 'verify_books',
      books: $bookIds
    },
    success: function(data){
      // 先清空所有激活类
      $bookElements.removeClass('is-active');
      
      if(data) {
        $bookElements.each(function() {
          var bookId = $(this).data("id");
          // 判断当前ID是否在返回数组中
          if(data.includes(bookId)) {
            $(this).addClass('is-active');
          }
        });
      }
    },
  });
}

补充提示 #

• 每次请求前先移除所有元素的is-active类，避免重复请求导致状态错误
• 确保PHP返回的是数组类型，wp_send_json()会自动将数组转为JSON，前端会解析为JS数组
• 如果书籍ID是字符串类型，注意前后端类型匹配，避免includes判断失效

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