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

Answer 2

我建议您查看jQuery的，因为它有很多包装和处理程序来处理这个东西，而且有很多的势头最近。

更具体到你的问题，你可以通过“这”给你的函数：

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

，然后在你的功能，你将有机会到src标签：

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

Answer 3

function enlargeImage(img) { var src = img.src; }