请求实现Twitch客户端状态切换展示功能（附代码求助）

我来帮你搞定这个Twitch客户端状态筛选的需求！结合你给出的代码开头，我整理了一套完整的实现方案，包含HTML结构补充、JavaScript逻辑完善和样式优化，直接就能上手用：

一、先补全HTML结构 #

你需要添加筛选按钮和用户列表的容器，这样才能让用户操作筛选并看到结果：

<!-- 筛选按钮组 -->
<div class="filter-buttons">
  <button id="show-all">全部</button>
  <button id="show-onair">On-Air（开播）</button>
  <button id="show-offair">Off-Air（停播）</button>
</div>

<!-- 用户列表容器 -->
<ul id="twitch-users-list"></ul>

二、完善JavaScript逻辑（基于你的代码扩展） #

这里我用了Twitch的Helix API来获取真实的直播状态，同时实现了筛选功能。注意要替换成你自己的Twitch Client ID（需要去Twitch开发者平台注册应用获取）：

$(document).ready(function() {
  // 你定义的用户列表
  const users = ["ESL_SC2", "OgamingSC2", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "ZoomPC", "Xbox", "Wolsk", "silgarth"];
  // 存储用户状态数据的数组，避免重复请求API
  let userData = [];

  // 替换成你自己的Twitch Client ID
  const TWITCH_CLIENT_ID = "你的Twitch客户端ID";

  // 单个用户状态获取函数
  const getUserLiveStatus = async (username) => {
    try {
      // 第一步：通过用户名获取用户ID（Twitch API需要用ID查直播状态）
      const userResponse = await fetch(`https://api.twitch.tv/helix/users?login=${username}`, {
        headers: { "Client-ID": TWITCH_CLIENT_ID }
      });
      const userResult = await userResponse.json();

      // 如果用户不存在，返回默认状态
      if (!userResult.data.length) {
        return { username, isLive: false, gameName: null };
      }

      const userId = userResult.data[0].id;
      // 第二步：通过用户ID查询直播状态
      const streamResponse = await fetch(`https://api.twitch.tv/helix/streams?user_id=${userId}`, {
        headers: { "Client-ID": TWITCH_CLIENT_ID }
      });
      const streamResult = await streamResponse.json();

      // 返回整理后的状态数据
      return {
        username,
        isLive: streamResult.data.length > 0,
        gameName: streamResult.data.length > 0 ? streamResult.data[0].game_name : null
      };
    } catch (error) {
      console.error(`获取${username}状态失败:`, error);
      return { username, isLive: false, gameName: null };
    }
  };

  // 加载所有用户状态并渲染
  const loadAndRenderAllUsers = async () => {
    // 批量获取所有用户状态
    userData = await Promise.all(users.map(user => getUserLiveStatus(user)));
    // 渲染全部用户
    renderUserList(userData);
  };

  // 渲染用户列表的核心函数
  const renderUserList = (usersToDisplay) => {
    const $listContainer = $("#twitch-users-list");
    // 清空现有列表
    $listContainer.empty();

    usersToDisplay.forEach(user => {
      // 根据直播状态添加不同的类名和文本
      const statusClass = user.isLive ? "user-onair" : "user-offair";
      const statusText = user.isLive ? "🔴 开播中" : "⚫ 已停播";
      const gameInfo = user.isLive ? `<span class="game-info">正在直播：${user.gameName}</span>` : "";

      // 生成列表项并添加到容器
      $listContainer.append(`
        <li class="user-item ${statusClass}">
          <span class="username">${user.username}</span>
          <span class="status">${statusText}</span>
          ${gameInfo}
        </li>
      `);
    });
  };

  // 绑定筛选按钮的点击事件
  $("#show-all").click(() => renderUserList(userData));
  $("#show-onair").click(() => {
    // 筛选出开播中的用户
    const onAirUsers = userData.filter(user => user.isLive);
    renderUserList(onAirUsers);
  });
  $("#show-offair").click(() => {
    // 筛选出停播的用户
    const offAirUsers = userData.filter(user => !user.isLive);
    renderUserList(offAirUsers);
  });

  // 页面加载完成后初始化数据
  loadAndRenderAllUsers();
});

三、添加CSS样式优化显示效果 #

给列表和按钮加些样式，让状态区分更明显：

/* 按钮组样式 */
.filter-buttons button {
  margin: 0 8px 16px 0;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #6441a5;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.filter-buttons button:hover {
  background-color: #53389e;
}

/* 用户列表样式 */
#twitch-users-list {
  list-style: none;
  padding: 0;
}
.user-item {
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  border-left: 4px solid transparent;
}
/* 开播状态样式 */
.user-onair {
  background-color: #ffebee;
  border-left-color: #f44336;
}
/* 停播状态样式 */
.user-offair {
  background-color: #f5f5f5;
  border-left-color: #9e9e9e;
}
.status {
  margin-left: 12px;
  font-weight: bold;
}
.game-info {
  display: block;
  margin-top: 6px;
  color: #666;
  font-size: 0.9em;
}

关键注意事项 #

• Twitch Client ID: 你需要去Twitch开发者平台注册一个应用，拿到自己的Client ID，替换代码里的TWITCH_CLIENT_ID，否则API请求会失败。
• CORS问题: 如果在本地直接打开HTML文件可能会遇到跨域错误，建议用本地服务器（比如VS Code的Live Server插件）运行代码。
• 数据缓存: 我把用户状态存在了userData数组里，避免每次筛选都重复请求API，提升性能。

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