Javascript 从特定图像 onclick 获取 .src

Question

我正在尝试制作一个图像交换器(单击较小的图像，它会更改屏幕较大区域中的图像)。但我得到的变量 imgSrc 为未定义。我相信这是因为我没有获得所单击的特定图像的来源。

        var imgSrc = document.getElementsByClassName('avatar-small').src;
        console.log("img Src  = " + imgSrc);

HTML:

<img class="avatar-small" onclick="selectAvatar()" src="images/avatars/1.png">
<img class="avatar-small" onclick="selectAvatar()" src="images/avatars/2.png">
<img class="avatar-small" onclick="selectAvatar()" src="images/avatars/3.png">

如何使用 .this 来使用某些内容，以便我实际上从单击的图像中获取源代码？

控制台日志输出:

img Src  = undefined 

适合任何寻找 JavaScript 图像交换器的人的解决方案

脚本:

function selectAvatar(this){
    var imgSrc = element.src;
    document.getElementById("avatar-big").src = imgSrc;
}

HTML:

<img id="avatar-big" src="images/avatars/10.png />

<img class='avatar-small' onclick='selectAvatar(this)' src='images/avatars/1.png' />
<img class='avatar-small' onclick='selectAvatar(this)' src='images/avatars/2.png' />
<img class='avatar-small' onclick='selectAvatar(this)' src='images/avatars/3.png' />

Answer 1

我认为您必须将当前元素 this 的引用传递给您的 selectAvatar 函数，例如:

<img class="avatar-small" onclick="selectAvatar(this)" src="images/avatars/1.png">
<img class="avatar-small" onclick="selectAvatar(this)" src="images/avatars/2.png">
<img class="avatar-small" onclick="selectAvatar(this)" src="images/avatars/3.png">

JavaScript:

function selectAvatar(el) {
    var imgSrc = el.src;
    console.log("img Src  = " + imgSrc);
}

演示:http://jsfiddle.net/IrvinDominin/RpP7h/