javascript - 单击时试图让图像在两个不同的源文件之间切换

Question

我是 JS 的新手。

我正在尝试编写一些javascript，这样当我单击图像时，它将切换到另一个图像。然后，当我再次单击它时，我希望图像切换回原始图像，依此类推。这是我写的一个简单的 Javascript 函数，希望能实现这一点。

function diffImage(item) 
{
if(document.getElementById(item).src == "blank.jpg")
    {
        document.getElementById(item).src = "black.jpg";
    }
else
    {
        document.getElementById(item).src = "blank.jpg";
    }

}

这是相关图像的标签：

<img src="black.jpg" id="image1" onclick=diffImage("image1")>

可悲的是，它不起作用。我究竟做错了什么？

Answer 1

除了dragon66 和snies 在评论中提到的引用问题外，您的if条件语句可能无法满足您的要求，因为element.src在javascript 中调用会返回完整的URL，而不仅仅是图像名称。所以你需要使用split和pop来获得如下的图像名称。

function diffImage(me){
    if(me.src.split("/").pop() === "blank.jpg"){
        me.src = "black.jpg";
    }
    else {
        me.src = "blank.jpg";
    }
}

你的 HTML 就变成了……

<img src="black.jpg" id="image1" onclick="diffImage(this);">

Answer 2

function diffImage(img) 
{
    if(img.src.match(/blank/)) img.src = "black.jpg";
    else img.src = "blank.jpg";
}

HTML

<img src="black.jpg" id="image1" onclick=diffImage(this) />​

演示。

Answer 3

试试这个：http: //jsfiddle.net/soparrissays/7PxFH/