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，我需要知道实际点击了哪个图像项（items [1]，items [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

应该是：

<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 2

这样做的一种方法可能是使用带有项ID的每个链接标记的onclick 所以它变成了这样的东西 document.getElementById('response').innerHTML += "<a href='#' onclick="showVideo('0')"><img src=" + responseObject.items[0].snippet.thumbnails.high.url + " /></a>";

Answer 3

您可能希望使用for() loop来创建每个<a>：

var responseObject={};
    responseObject.items=[
  	{snippet:{thumbnails:{high:{url:'http://lorempixel.com/50/5'}}}, id:{videoId:`A1213131`}},
  	{snippet:{thumbnails:{high:{url:'http://lorempixel.com/50/5'}}}, id:{videoId:`B1213131`}},
  	{snippet:{thumbnails:{high:{url:'http://lorempixel.com/50/5'}}}, id:{videoId:`C1213131`}}
  	];

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>

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

3 个答案: