Javascript从特定图像onclick获取.src

我正在尝试制作一个图像交换程序（单击较小的图像，它会在屏幕的较大区域中更改图像）。但是我得到的变量

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">

为寻找JavaScript图像交换程序的任何人提供的解决方案

脚本：

HTML:

---

document.getElementsByClassName（'avatar-small'）返回一个数组。您必须使用索引，如：

document.getElementsByClassName('avatar-small')[0]

---

我认为您必须将当前元素

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">

---

演示：

在单个页面中，可能存在许多具有相同类的元素，使其成为一个数组，因此请像这样使用它

document.getElementsByClassName('avatar-small')[index].src;

对于单击部分，不确定Javascript事件，但JQuery将提供以下方式：

$(document).ready(function(){

   $(document).on("click", ".avatar-small", function()
    {
        console.log($(this).attr("src"));
        //for changing it
        $(this).attr("src") =  "resized_image.jpg";

    });

});

---

从onClick（）调用函数时，需要将“this”传递给函数，否则函数本身没有定义“this”，并将默认为引用窗口对象的“this”

<img src="xxxx.jpg" onclick="myFunction(this)" />

---

现在你有了src，可以随心所欲了

这将始终获得该类的第一个元素，而不是单击的元素。

getElementsByClassName（'avatar-small'）。[index]

是一个语法错误。那么

索引是从哪里来的呢？抱歉，在
[index]
@Francesca index之前删除点。请使用数字来代替索引，例如，这个类中有3个元素，因此可以使用0到2之间的任意数字inclusivePerfect！谢谢你的简单回答：）我知道这就是问题所在，这就是为什么我在《凤凰社》中提到它的原因。这基本上与伊文在你之前10分钟发布的答案相同：@Francesca与我的答案相同，10分钟后发布，为什么不接受我的：-（？）？
function selectAvatar(el) {
    var imgSrc = el.src;
    console.log("img Src  = " + imgSrc);
}

document.getElementsByClassName('avatar-small')[index].src;

$(document).ready(function(){

   $(document).on("click", ".avatar-small", function()
    {
        console.log($(this).attr("src"));
        //for changing it
        $(this).attr("src") =  "resized_image.jpg";

    });

});

<img src="xxxx.jpg" onclick="myFunction(this)" />

function myFunction(element) {
  var thing = element.src;
}