如何將圖像對象傳遞給分配給它的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; }