纯JavaScript视频页开发：如何从对象提取标题并绑定到对应视频？

嗨，我来帮你捋捋这个标题绑定的问题～从你给出的all_videos数据结构来看，咱们先排查几个最可能踩坑的点：

1. 索引不匹配导致标题与视频错位 #

这是最常见的问题：如果你把所有分类的标题混在一起遍历，或者循环嵌套顺序错误，就会出现标题和对应分类下的视频对不上的情况。

举个典型的错误写法：

// 错误：将所有分类的标题合并后全局匹配，忽略了分类关联
const allTitles = [];
all_videos.cats.forEach(item => {
  allTitles.push(...item.titles);
});
// 若不同分类视频数量和标题数量不匹配，直接按全局索引赋值会完全混乱
const videos = document.querySelectorAll('video');
videos.forEach((video, index) => {
  video.title = allTitles[index];
});

修复思路：按分类绑定标题与视频，先定位到当前分类下的视频元素，再用该分类专属的titles数组匹配：

// 正确：先遍历每个分类，再处理对应分类下的视频
all_videos.cats.forEach(catItem => {
  // 假设你的视频容器有分类标识（比如data-category属性），精准定位当前分类的视频
  const categoryVideos = document.querySelectorAll(`[data-category="${catItem.cat}"] video`);
  
  // 先校验数量是否匹配，避免后续错位
  if (categoryVideos.length !== catItem.titles.length) {
    console.warn(`分类「${catItem.cat}」的视频数量与标题数量不匹配！`);
    return;
  }
  
  // 逐个给视频绑定标题（如果是给页面上的标题元素赋值，就替换成对应DOM操作）
  categoryVideos.forEach((video, index) => {
    video.title = catItem.titles[index];
    // 示例：如果标题是单独的DOM元素，比如视频的兄弟节点
    // video.parentElement.querySelector('.video-title').textContent = catItem.titles[index];
  });
});

2. DOM元素选择逻辑错误 #

如果你的页面没有给不同分类的视频容器做区分（比如没有data-category这类标识），很容易把A分类的标题赋给B分类的视频。解决办法就是给每个分类的视频容器加上唯一标识，确保能精准定位到对应分类下的视频元素。

3. 数据结构访问拼写错误 #

比如你不小心把catItem.titles写成了catItem.title（单数），导致拿不到标题数组。这种低级错误很容易被忽略，先检查一遍变量名的拼写是否和数据结构一致！

4. 动态加载视频的异步问题 #

如果你的视频是通过AJAX或动态创建的，可能在执行标题绑定逻辑时，视频元素还没挂载到DOM上。这时候要确保在视频元素加载完成后再执行绑定，比如把绑定代码放到动态创建视频的回调函数里，或者用MutationObserver监听DOM变化。

• 打开浏览器控制台，打印catItem.titles确认是否能正确获取标题数组，再打印categoryVideos看看是否选中了预期数量的视频元素。
• 给视频赋值时加个console.log，看看实际赋值的标题是不是你预期的内容。

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