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

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条件语句可能不会执行您想要的操作，因为在javascript中调用element.src将返回完整的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

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

Answer 3

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) />​