如何确定使用 javascript/html 单击了哪个对象/图像
How determine which object/image was clicked using 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,我需要知道实际单击了哪个图像项(项目[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,只是为了让我现在的事情变得简单。
你可能
想使用 for() 循环来创建每个<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>
应该是:
<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
找到您的元素。
一种方法可能是对每个带有项目 ID 的链接标签使用 onclick 所以它变成了这样的东西 document.getElementById('response').innerHTML += "<a href='#'
onclick="showVideo('0')"><img src=" +
responseObject.items[0].snippet.thumbnails.high.url + " /></a>";
相关文章:
- JS-如何将图像对象转换为灰度并显示
- 带有内置图像对象的Canvas组件构造函数;t显示's图像
- 破坏相位器.通过按钮点击图像对象会导致TypeError
- 如何使用Phonegap将图像对象保存到Android中的文件中
- 在画布中创建自定义图像对象
- Javascript:图像对象的oneror事件有哪些参数?如何获取与图像相关的错误的其他详细信息
- 使用 kineticjs 如何就地旋转图像对象
- Javascript 获取维度图像对象
- Javascript 事件处理程序图像对象
- 将图像对象转换为文件对象,javascript
- 释放图像对象
- 为什么图像样式不透明度不会更改画布中的图像对象
- 如何从模板级别渲染 JavaScript 图像对象
- 创建图像对象数组
- 以编程方式创建图像对象
- Object.observe() 不适用于原生图像对象
- 如何从 CanvasPixelArray 创建图像对象
- 在画布中使用 svg 对象而不是粗糙的图像对象
- Jquery 图像对象
- 如何检测是否正在显示图像对象