Javascript Javascript简单的点击图像交换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4363439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript simple onclick image swap
提问by user339946
I am trying to use Javascript to swap an image, so far I can get it from A to B, but not back.
我正在尝试使用 Javascript 来交换图像，到目前为止我可以将它从 A 获取到 B，但不能返回。
Here is what I'm using to create one swap:
这是我用来创建一个交换的内容：
<img src="pic1.png" name="pic" onclick="window.document.pic.src='pic2.png';"/>
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:
这将图像 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';
}"/>
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
在这种情况下它似乎不起作用。它将切换到 pic2，但不会切换回 pic1。这与onclick有关吗？我的 if 语句？谢谢
采纳答案by Bhanu Prakash Pandey
In your code the problem is when you alert window.document.pic.src its print like http://localhost/pic1.pngand then you are are use condition if (window.document.pic.src == 'pic1.png') how is it true. try this
在你的代码中，问题是当你提醒 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()"/>
回答by Ed Haack
Try this simple trick... easy to maintain.
试试这个简单的技巧……易于维护。
<script>
var onImg= "on.jpg";
var offImg= "off.jpg";
</script>
<img src="on.jpg" onclick="this.src = this.src == offImg ? onImg : offImg;"/>
回答by Shakti Singh
wrong use of == in if condition
在 if 条件中错误使用 ==
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';
}"/>
回答by Nivas
window.document.pic.src='pic1.png'assignspic1.pngto the left hand side. It does NOT compare.Though not directly relevant, try not to access elements by their name globally. Use their
id.Your javascript should not be inside the onclick. It should be inside a javasctipt
function
window.document.pic.src='pic1.png'分配pic1.png到左侧。它不比较。尽管不直接相关，但尽量不要在全局范围内按名称访问元素。使用他们的
id.你的 javascript 不应该在 onclick 里面。它应该在一个 javasctipt 里面
function
Combined:
综合：
The img tag:
img 标签：
<img src="pic1.png" name="pic" id="pic" onclick="swap()"/>
The javascript
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>
回答by Shafquat
Your code is doing what the below lines do, it's not going inside an if elseblock, so if you remove your if elseblock the code still will work, because on mouse click it sets the value of srcas 'pic2.png', which was 'pic1.png' earlier, and when you click again because it's already pic2.png so it remains the same.
你的代码正在做下面几行的事情，它不会进入一个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>
回答by Tayyab Qureshi
You can try this.
你可以试试这个。
<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>
