Question

我正在尝试使用Javascript交换图片，到目前为止我可以从A到B，但不能回来。

以下是我用来创建一个交换的内容：

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

这将图像1交换到图像2，足够简单。但我希望能够通过点击新图像恢复到图像2.我尝试使用它：

<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;"/>

Answer 2

错误使用== in if condition

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';
}"/>

Answer 3

window.document.pic.src='pic1.png'将pic1.png分配到左侧。它没有比较。
虽然不直接相关，但请勿尝试全局按名称访问元素。使用他们的id。
您的javascript不应该在onclick中。它应该在javasctipt function

组合：

img标签：

<img src="pic1.png" name="pic" id="pic" onclick="swap()"/>

javascript

<script>
function swap()
{
   if (document.getElementById("pic").src.endsWith('pic1.png') != -1)  //==:Comparison
   { 
      document.getElementById("pic").src = "pic2.png"; //=:assignment   
   } 
   else if (window.document.pic.src.endsWith('pic2.png') != -1) 
   { 
      document.getElementById("pic").src = "pic1.png"; 
   }
}
</script>

Answer 4

在您的代码中问题是当你提醒window.document.pic.src它的打印像http://localhost/pic1.png 然后你是使用条件if（window.document.pic.src =='pic1.png'）怎么回事呢。试试这个

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

Answer 5

您的代码正在执行以下行所做的操作，它不会进入if else块内，因此如果删除if else块，代码仍然有效，因为在鼠标单击时它会设置值src为'pic2.png'，之前是'pic1.png'，再次点击是因为它已经是pic2.png所以它保持不变。

<html>
<head>
<script type="text/javascript">

function swap() {
    window.document.pic.src='pic2.png';
}
</script>

</head>
<body>
<img src="pic1.png" name="pic" onclick="swap()"> 
</body>
</html>

Answer 6

你可以试试这个。

<html>
<head>
<title>Swapping Images</title>
</head>
<body>
<img id="myimg" src="img1.jpg" hieght="300" width="300" onClick="change ()"/>
</body>
</html>
<html>
<head>
<script>
function change () {
  var img=document.getElementById("myimg");
  if (img.src === "img1")
    img.src="img2.jpg";
  else 
    img.src="img1.jpg";
}
</script>
</head>
</html>

Javascript简单的onclick图像交换

6 个答案: