Javascript简单的onclick图像交换 [英] Javascript simple onclick image swap

问题描述

我正在尝试使用Javascript交换图像，到目前为止，我可以将其从A转换为B，但不能返回.

I am trying to use Javascript to swap an image, so far I can get it from A to B, but not back.

这是我用来创建一个交换的内容:

Here is what I'm using to create one swap:

<img src="pic1.png" name="pic" onclick="window.document.pic.src='pic2.png';"/>

这将图像1交换为图像2，非常简单.但是我希望能够通过单击新图像2恢复到图像1.我尝试使用此图像:

This swaps image 1 to image 2, simple enough. But I want to be able to revert back to image 1 by clicking on the new image 2. I tried using this:

<img src="pic1.png" name="pic" onclick="
if (window.document.pic.src='pic1.png'){
window.document.pic.src='pic2.png';
} 
else if (window.document.pic.src='pic2.png'){
window.document.pic.src='pic1.png';
}"/>

在这种情况下似乎不起作用.它将切换到pic2，但不会切换回pic1.与onclick有关吗?我的if陈述?谢谢

It doesn't seem to work in this instance. It will switch to pic2, but not switch back to pic1. Is it something to do with onclick? My if statements? Thanks

推荐答案

在您的代码中，问题是当您警告window.document.pic.src时，其打印内容类似于 http://localhost/pic1.png 然后如果(window.document.pic.src =='pic1.png')怎么回事试试这个

In your code the problem is when you alert window.document.pic.src its print like http://localhost/pic1.png and then you are are use condition if (window.document.pic.src == 'pic1.png') how is it true. try this

<script type="text/javascript">
function test()
{
    alert(window.document.pic.src);
     //alert msg print like http://localhost/test/pic1.png
    if (document.pic.src=='http://localhost/test/pic1.png'){

document.pic.src='pic2.png';
} 
else if (document.pic.src=='http://localhost/test/pic2.png'){

document.pic.src='pic1.png';
}
}
</script>
<img src="pic1.png" name="pic" onclick="test()"/>

这篇关于Javascript简单的onclick图像交换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！