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

时间:2015-03-17 01:57:55

标签: 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>";

等等。如果重要,我只是处理由解析的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来保持简单。

3 个答案:

答案 0 :(得分: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找到您的元素。

答案 1 :(得分:1)

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

答案 2 :(得分:1)

您可能希望使用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>