Как определить, какой объект/изображение щелкнул с помощью JavaScript/HTML

Question

По сути, у меня есть страница с 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>"; 

и так далее. Если это имеет значение, я просто имею дело с массивом объектов, которые состоят из разбора 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>" 
} 

Я читал в течение нескольких часов, но я не могу показаться, чтобы наткнуться на чистый способ сделать это. Есть идеи? Я хотел бы придерживаться javascript для этого, просто чтобы все было просто для меня.

Answer 1

Вы можете использовать for() loop для создания каждого из ваших <a> :

var responseObject={}; 
 
    responseObject.items=[ 
 
    \t {snippet:{thumbnails:{high:{url:'http://lorempixel.com/50/5'}}}, id:{videoId:`A1213131`}}, 
 
    \t {snippet:{thumbnails:{high:{url:'http://lorempixel.com/50/5'}}}, id:{videoId:`B1213131`}}, 
 
    \t {snippet:{thumbnails:{high:{url:'http://lorempixel.com/50/5'}}}, id:{videoId:`C1213131`}} 
 
    \t ]; 
 

 
for (var i = 0; i < responseObject.items.length; i++) { 
 
    //create the anchor 
 
    var a = document.createElement('a'); 
 
    //set its href property 
 
    a.href = '#'; 
 
    //insert the thumbnail into it 
 
    a.innerHTML = "<img src=" + responseObject.items[i].snippet.thumbnails.high.url + i + " />"; 
 
    //add the click event 
 
    a.addEventListener('click', function(e) { 
 
    //prevent it to act as an anchor; 
 
    e.preventDefault(); 
 
    //insert the iframe into #theVideo 
 
     //note that if the iframe is already setted up, it may be better to only change its src property document.querySelector(theVideo>iframe).src=... 
 
    document.getElementById('theVideo').innerHTML = "<iframe width='420' height='345' src=http://www.youtube.com/embed/" + responseObject.items[this].id.videoId + " /></iframe>" + 
 
     //only for the snippet example 
 
     "<p>http://www.youtube.com/embed/" + responseObject.items[this].id.videoId + "</p>"; 
 
    }.bind(i)); //.bind(i) will make our `i` var correspond to the `this` var of the fired event. 
 
    // append the newly created <a> to #response div 
 
    document.getElementById('response').appendChild(a); 
 
}

<div id="response"></div> 
 
<div id="theVideo"></div>

Answer 2

Должно быть:

<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; 
    } 
} 

Вы должны добавить класс в HTML. Запросите DOM и найдите свой элемент через target.

Answer 3

Один из способов сделать это может быть использовать OnClick с каждой ссылки тег с идентификатором элемента Таким образом, становится чем-то вроде этого document.getElementById('response').innerHTML += "<a href='#'
onclick="showVideo('0')"><img src=" + responseObject.items[0].snippet.thumbnails.high.url + " /></a>";