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

DEMO.

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

3 个答案: