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/

Answer 2

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

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

    });

});

Answer 3

当您从onClick（）调用函数时，您需要将'this'传递给函数，否则函数本身没有定义'this'，并且默认为'this'引用Window对象。

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

您也不需要按班级搜索。如果你这样做，你最终会获得所有元素的数组。只需将'this'传递给函数并以这种方式简化它。

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

现在你已经得到了你的src，可以随意使用它！

Answer 4

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

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

Javascript从特定图像中获取.src onclick

4 个答案: