javascript - 如何将图像对象传递给分配给它的 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);
}