如何创建含视频ID与标题的数组，实现带标题的视频缩略图循环生成？

我想要实现一个循环，生成包含视频标题的视频缩略图。目前已配置好获取视频ID的函数，能通过循环生成缩略图和链接，但不知道如何编写数组或函数来包含标题。
当前代码如下：

var Ids = "id1,id2,id3";

if (typeof Ids === 'undefined') { Ids = ""; }
var vIds = Ids.split(",");

$.each(vIds, function(index,value) {

 $('.vrow').append('<button type="button" class="btn btn-link col-lg-2 col-md-2 col-sm-2 col-xs-6 vid vid'+index+'"><img src="https://img.youtube.com/vi/'+value+'/mqdefault.jpg" alt="" /><span><i class="fa fa-play"></i></span></button>');
 });

我曾尝试使用单独的标题数组，但导致循环异常且无法正确渲染YouTube ID。请问是否可以使用同一数组同时存储ID和标题？如果可以，如何映射标题值？这是否属于multidimensional array？
我尝试过的格式如下：

var Ids = "id1,title1,id2,title2";

解决方案 #

1. 推荐使用对象数组（结构化存储） #

你说的「同一数组同时存ID和标题」完全可行，这属于对象数组（是结构化的多维数组实现），比你尝试的扁平字符串格式更清晰，不易出错。

直接定义包含视频ID和标题的对象数组，每个元素对应一个视频的完整信息：

// 结构化的视频数据数组，每个元素存ID和标题
var videos = [
  { id: "id1", title: "视频标题1" },
  { id: "id2", title: "视频标题2" },
  { id: "id3", title: "视频标题3" }
];

// 循环遍历数组，生成带标题的缩略图按钮
$.each(videos, function(index, video) {
  $('.vrow').append(`
    <button type="button" class="btn btn-link col-lg-2 col-md-2 col-sm-2 col-xs-6 vid vid${index}">
      <img src="https://img.youtube.com/vi/${video.id}/mqdefault.jpg" alt="${video.title}" />
      <span><i class="fa fa-play"></i></span>
      <div class="video-title">${video.title}</div> <!-- 新增标题展示元素 -->
    </button>
  `);
});

2. 如果必须使用字符串格式（不推荐） #

若因限制只能用"id1,title1,id2,title2"这类字符串格式，可以通过拆分后按「每两个元素一组」的逻辑处理：

var videoStr = "id1,标题1,id2,标题2,id3,标题3";
if (typeof videoStr === 'undefined') { videoStr = ""; }
var videoArr = videoStr.split(",");

// 步长设为2，每次取一组ID和标题
for (var i = 0; i < videoArr.length; i += 2) {
  // 避免数组越界，确保ID和标题都存在
  if (videoArr[i] && videoArr[i+1]) {
    var videoId = videoArr[i];
    var videoTitle = videoArr[i+1];
    $('.vrow').append(`
      <button type="button" class="btn btn-link col-lg-2 col-md-2 col-sm-2 col-xs-6 vid vid${i/2}">
        <img src="https://img.youtube.com/vi/${videoId}/mqdefault.jpg" alt="${videoTitle}" />
        <span><i class="fa fa-play"></i></span>
        <div class="video-title">${videoTitle}</div>
      </button>
    `);
  }
}

关键说明 #

• 对象数组的方式更易维护，后续新增视频属性（如时长、描述）时扩展成本更低。
• 给图片添加alt属性为标题，可提升页面可访问性。
• 可以给标题元素（.video-title）添加CSS样式，控制标题的显示位置、字体大小等。

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