如何确定使用javascript/html单击了哪个对象/图像

基本上，我有一个页面，其中显示了100个图像缩略图，格式如下：

   document.getElementById('response').innerHTML += "<a href='#'><img src=" + responseObject.items[0].snippet.thumbnails.high.url + " /></a>";
   document.getElementById('response').innerHTML += "<a href='#'><img src=" + responseObject.items[1].snippet.thumbnails.high.url + " /></a>";
   document.getElementById('response').innerHTML += "<a href='#'><img src=" + responseObject.items[2].snippet.thumbnails.high.url + " /></a>";

document.getElementById（'response'）.innerHTML+=“”；
document.getElementById（'response'）.innerHTML+=“”；
document.getElementById（'response'）.innerHTML+=“”；

等等。如果有关系的话，我只是在处理一个由经过解析的JSON组成的对象数组。无论如何，当用户单击其中一个图像时，我需要调用一个函数，比如showVideo，我需要知道实际单击了哪个图像项目（项目[1]，项目[2]），以便我可以将其传递给我的函数并显示该项目的嵌入式youtube播放器。粗略地说，我的函数可能如下所示：

function showVideo(itemClicked){
   document.getElementById('theVideo').innerHTML = "<iframe width='420' height='345' src=http://www.youtube.com/embed/" + responseObject.items[itemClicked].id.videoId + " /></iframe>"
}

函数显示视频（单击项）{
document.getElementById（'theVideo'）。innerHTML=“”
}

我已经读了几个小时了，但我似乎找不到一个干净的方法来做这件事。有什么想法吗？我想坚持使用javascript来实现这一点，只是为了暂时让事情变得简单

应该是：

<a class="video-target">...</a>
var elms = document.getElementByClassName('video-target');
elms.foreach(function (el) {
    el.onclick = function (e) {
        // e.target is the one you clicked on
        var target = e.target;
    }
}

。。。
var elms=document.getElementByClassName（'video-target'）；
elms.foreach（函数（el）{
el.onclick=函数（e）{
//e.target是您单击的目标
var目标=e.target；
}
}

---

您必须向HTML中添加一个类。查询DOM，并通过

target

找到您的元素一种方法可能是对每个带有项目id的链接标记使用onclick 所以它变成了这样

document.getElementById（'response'）.innerHTML+=”；

您可能需要使用来创建每个

：

var responseObject={}；
responseObject.items=[
{代码片段：{缩略图：{high:{url:'http://lorempixel.com/50/5{}}，id:{videoId:`A1213131`}，
{代码片段：{缩略图：{high:{url:'http://lorempixel.com/50/5{}}，id:{videoId:`B1213131`}，
{代码片段：{缩略图：{high:{url:'http://lorempixel.com/50/5{}}，id:{videoId:`C1213131`}
];
对于（变量i=0；iiframe）.src=。。。
document.getElementById（'theVideo'）。innerHTML=“”+
//仅适用于代码段示例
“http://www.youtube.com/embed/“+responseObject.items[this].id.videoId+”
”；
}.bind（i））；//.bind（i）将使我们的'i'变量对应于激发事件的'this'变量。
//将新创建的数据追加到#response div
document.getElementById（'response'）.appendChild（a）；
}

看起来不错。什么是e.target？一个整数？一个字符串？如果它是整数，我可以指望它正常吗？换句话说，如果用户单击我页面上的第10个图像，可以指望e.target为9？e.target是DOM元素。它是一个对象。我会更熟悉DOM。要获得计数信息，需要将其添加到DOM元素。从学习如何读取DOM属性开始。我喜欢这个！似乎是一个更具可伸缩性的解决方案，特别是因为我的responseObject数组是从我从YouTube API返回的JSON中提取的。它还教会了我一种不同的方法来解决这个问题。谢谢！