如何将图像对象传递给分配给它的onclick函数？

Question

对不起,如果这个问题令人困惑,我会自学javascript.我正在动态生成图像缩略图,我希望能够在用户点击缩略图时放大图像.我创建图像标记并分配onclick函数的代码看起来像......

var imageTag = "<img onclick=\"enlargeImage()\" class=\"thumb\" src=\"" + photoURL + "\" />"; 
document.getElementById("image-thumbnail").innerHTML = imageTag;

使用上面的代码,我的缩略图会显示,当用户点击它时,enlargeImage()会调用该函数.我的问题是,如何访问在enlargeImage()函数内单击的图像对象？我尝试访问this函数内部的对象,希望它指向被单击的图像,但是this引用整个页面,而不是单击的图像.我希望能够访问该src属性,以及更改图像缩略图的样式属性.我还应该注意到,最终会有多个图像,这就是我需要这种动态行为的原因.

非常感谢您的帮助!

Answer 1

有几种方法可以做到这一点.最简单的方法是简单地向enlargeImage()函数添加一个参数,并this在调用它时将其传递给它.

var imageTag = "<img onclick=\"enlargeImage(this)\" class=\"thumb\" src=\"" + photoURL + "\" />";

然后在函数中......

function enlargeImage(img) {
  alert(img.src);
}