如何获取列表中项的索引并将其映射到 json 对象以执行 onClick 事件

Question

我有一个看起来像下面的对象：

[
{
thumbnail: 'https://dummyimage.com/100x100/000/fffu0026text=1',
sources: [{
src: 'http://view.vzaar.com/14749665/video'
}]
},
{
thumbnail: 'https://dummyimage.com/100x100/000/fffu0026text=2',
sources: [{
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
type: 'video/mp4'
}]
}
]

我已经设法抓取每个缩略图并使用 forEach 循环将其附加到 HTML 中。

我现在希望能够单击缩略图，它应该控制台.log视频源网址(sources[0].src(。

我怎样才能做到这一点？我是否需要先抓取点击的图像的索引，然后将其与它所在的对象相关联？

Answer 1

只需将id字段添加到每个对象中，例如：

[
{
id: 0,
thumbnail: 'https://dummyimage.com/100x100/000/fffu0026text=1',
sources: [{
src: 'http://view.vzaar.com/14749665/video'
}]
},
{
id: 1,
thumbnail: 'https://dummyimage.com/100x100/000/fffu0026text=2',
sources: [{
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
type: 'video/mp4'
}]
}
]);

然后将对象的指定 id 作为属性附加到每个 html 标签中，例如data-id.在单击事件中获取data-id属性的值并与对象的 id 关联。