Javascript 简单的 onclick 图像交换

Question

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

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

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

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

<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 语句？谢谢

Answer 1

试试这个简单的技巧……易于维护。

<script>
var onImg= "on.jpg";
var offImg= "off.jpg";
</script>
<img src="on.jpg" onclick="this.src = this.src == offImg ? onImg : offImg;"/>