实现YouTube多区域热门视频按分类筛选功能的技术咨询

核心前置准备 #

• 必须构建本地的分类ID-名称映射关系：你解析的视频数据仅存储category_id数值，无分类名称字段，内置静态映射可以避免反复请求分类接口、减少跨区域数据匹配的逻辑冗余，后续结果展示、分类标注都可以直接通过ID取到名称。
  示例映射代码：

  const categoryIdMap = {
    1: "Film & Animation",
    2: "Autos & Vehicles",
    10: "Music",
    15: "Pets & Animals",
    // 按你现有列表补全所有分类ID对应的名称即可
    44: "Trailers"
  }
  

现有代码与结构的硬伤修正 #

• 之前写的把复选框嵌套在<select>标签内的结构是完全无效的：<select>原生仅支持<option>子元素，内部包裹的复选框会出现渲染异常、交互失效的问题。修正后的结构直接去掉外层<select>，将分类列表放在普通容器中即可：

  <div class="category-list" id="categoryList">
    <input type="checkbox" name="category" value="1"> 
    <label>Film & Animation</label><br>
    <input type="checkbox" name="category" value="2"> 
    <label>Autos & Vehicles</label><br>
    <!-- 其余分类按原有列表逐行放置，保持统一的name属性为category，方便批量取值 -->
  </div>
  
  <button class="inputclass" id="filterBtn">Filter</button>
  

筛选功能完整实现逻辑 #

1. 给Filter按钮绑定点击事件，不要将内联onClick写在HTML属性中，避免代码耦合。
2. 点击时批量获取所有被勾选的复选框值，注意类型对齐：你解析视频时category_id是parseInt转成的数值类型，DOM取到的复选框值是字符串，必须转成数字后再做匹配，否则永远无法命中结果。
3. 复用原有searchFunction中的数据格式化、去重逻辑，不要重复造轮子。
   完整的筛选函数代码：

// 传入当前选中的区域值
function filterByCategory(activeRegion) {
  // 获取所有勾选的分类ID，统一转为数值类型
  const checkedIds = Array.from(
    document.querySelectorAll('input[name="category"]:checked')
  ).map(input => parseInt(input.value));

  // 取对应区域的全量视频数据
  const allRegionVideos = videos[activeRegion];

  // 筛选逻辑：未勾选任何分类时返回全量视频，勾选后仅保留分类ID匹配的条目
  const matchedVideos = checkedIds.length === 0
    ? allRegionVideos
    : allRegionVideos.filter(video => checkedIds.includes(video.category_id));

  // 复用原有格式化、去重逻辑，顺便附带分类名称
  return matchedVideos
    .map(item => ({
      title: item.title,
      channel_title: item.channel_title,
      views: item.views,
      likes: item.likes,
      dislikes: item.dislikes,
      thumbnail_link: item.thumbnail_link,
      category_name: categoryIdMap[item.category_id]
    }))
    // 优化原有嵌套reduce的去重逻辑，降低时间复杂度
    .reduce((acc, current) => {
      return acc.some(prev => prev.title === current.title) 
        ? acc 
        : [...acc, current];
    }, []);
}

// 绑定按钮点击事件
document.getElementById('filterBtn').addEventListener('click', () => {
  const filteredResult = filterByCategory(currentSelectedRegion);
  // 调用你原有的页面渲染函数，将结果输出到页面上
  renderVideoList(filteredResult);
});

额外优化提示 #

• 如果后续要改回单选下拉的分类筛选，只需要把复选框替换为<select>下的<option>元素，取值逻辑改成获取选中的option的value即可，核心筛选逻辑完全不用改动。
• 去重逻辑原来的实现是嵌套reduce，时间复杂度为O(n²)，换成Array.some判断后可降到O(n)，数据量较大时不会出现卡顿。
• 多区域适配不需要为每个区域单独做分类映射：YouTube平台的视频分类ID是全局通用的，只有极少数自定义区域分类，只要你的视频数据中存储的category_id和映射表对齐，就可以直接跨区域复用。

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