提问人：flexdev 提问时间：6/9/2023 最后编辑：flexdev 更新时间：9/12/2023 访问量：28
创建具有视频 ID 和字幕的数组
Creating an array with video IDs and Titles
问：
我正在尝试创建一个循环，该循环将创建一个包含视频标题的视频缩略图。
我目前设置了函数来获取 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>');
});
我确实尝试为标题使用一个单独的数组，但它只创建了更多的循环，并且没有呈现 YT ID。
是否可以将数组同时用于 ID 和 Title？如果是这样，我将如何映射标题值？这会被视为多维数组吗？
var Ids = "id1,title1,id2,title2";
答：
0赞
user2342558
6/9/2023
#1
首先，ID 的间距不得为 ，否则您将得到以下内容： id2id2
var Ids = "id1,id2,id3";
要同时插入标题，您可以使用另一个不同的字符作为分隔符，例如：
var iDsWithTitle = "id1|title1,id2|title2,id3|title3";
请注意，标题可能包含 ，因此应选择其他分隔符，例如 。,|
更好的方法是使用 json 字符串来存储这些数据，然后将其转换为要循环的对象。
评论
0赞
flexdev
6/10/2023
谢谢！我的代码将 ID 连接在一起。我应该让它看起来更准确。从 iDsWithTitle 变量中，我将如何映射标题？
0赞
imvain2
6/10/2023
#2
您可以创建一个数组对象，如下所示。然后，每个对象都将包含视频的信息。然后只需遍历数组并引用视频的信息即可。
let videos = [
{"id": "id1","title": "Video Title 1"},
{"id": "id2","title": "Video Title 2"},
{"id": "id3","title": "Video Title 3"},
{"id": "id4","title": "Video Title 4"}
];
$.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' + video.id + '"><img src="https://img.youtube.com/vi/' + video.id + '/mqdefault.jpg" alt="" /><span><i class="fa fa-play"></i></span></button>');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vrow"></div>
0赞
flexdev
9/12/2023
#3
感谢您的更新和回答。我考虑了你的考虑，我也必须考虑一些事情，我需要代码为那些不随时使用代码的人工作，因此必须降低损坏和 UI 的风险。
我决定为每个 ID 和 Title 创建一个变量，然后通过 Split 创建一个数组。您所要做的就是粘贴您的 ID/标题并用逗号分隔。
var Ids = '';
var Titles = '';
if (typeof Ids === 'undefined') { Ids = ""; }
if (typeof Titles === 'undefined') { Titles = ""; }
var vIds = Ids.split(",");
var Vtls = Titles.split(",");
然后我创建了一个循环来创建按钮。这完美地设置了缩略图、要播放的视频 ID 并添加了字幕。
$.each(vIds, function(index,value) {
//console.log(index,value);
//first video gets set as featured
$('iframe').attr('src','https://www.youtube.com/embed/'+vIds[0]);
$('h3').text(Vtls[0]);
//create video button
$('.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><span class="vtitle">'+Vtls[index]+'</span></button>');
//create video swap function
$('button.vid'+index).click(function() {
$('iframe').attr('src','https://www.youtube.com/embed/'+value);
$('h3').text(Vtls[index]);
});
//if no videos, remove video div
if (vIds.length < 1) { $('.videos-section-inner').remove(); }
if (vIds.length === 1) { $('button.vid'+index).remove(); }
//end loop
});
评论