Html 单击时更改按钮中的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16633157/
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
Change image in button on click
提问by JamesM
I've got a button with an image inside that I want to swap when clicked. I got that part working, but now I also want it to change back to the original image when clicked again.
我有一个按钮，里面有一个图像，我想在点击时交换它。我让那部分工作了，但现在我还希望它在再次单击时变回原始图像。
The code I'm using:
我正在使用的代码：
<button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button>
And the Javascript:
和 Javascript：
function action() {
swapImage('images/image2.png');
};
var swapImage = function(src) {
document.getElementById("ImageButton1").src = src;
}
Thanks in advance!
提前致谢！
采纳答案by enhzflep
While you coulduse a global variable, you don't need to. When you use setAttribute/getAttribute, you add something that appears as an attrib in the HTML. You also need to be aware that adding a global simply adds the variable to the window or the navigator or the document object (I don't remember which).
虽然您可以使用全局变量，但您不需要。当您使用 setAttribute/getAttribute 时，您添加了一些在 HTML 中显示为属性的内容。您还需要注意，添加全局变量只是将变量添加到窗口或导航器或文档对象（我不记得是哪个）。
You can also add it to the object itself (i.e as a variable that isn't visible if the html is viewed, but is visible if you view the html element as an object in the debugger and look at it's properties.)
您还可以将它添加到对象本身（即作为一个变量，如果查看 html 则不可见，但如果您在调试器中将 html 元素视为对象并查看它的属性，则可见。）
Here's two alternatives. 1 stores the alternative image in a way that will cause it to visible in the html, the other doesn't.
这里有两种选择。1 以使其在 html 中可见的方式存储替代图像，而另一个则不会。
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', mInit, false);
function mInit()
{
var tgt = byId('ImageButton1');
tgt.secondSource = 'images/image2.png';
}
function byId(e){return document.getElementById(e);}
function action()
{
var tgt = byId('ImageButton1');
var tmp = tgt.src;
tgt.src = tgt.secondSource;
tgt.secondSource = tmp;
};
function action2()
{
var tgt = byId('imgBtn1');
var tmp = tgt.src;
tgt.src = tgt.getAttribute('src2');
tgt.setAttribute('src2', tmp);
}
</script>
<style>
</style>
</head>
<body>
<button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button>
<br>
<button onClick="action2();">click me<img id='imgBtn1' src="images/image1.png" src2='images/image2.png' width="16px"></button>
</body>
</html>
回答by Dave Hogan
You need to store the old value in a global variable.
您需要将旧值存储在全局变量中。
For example:
例如：
var globalVarPreviousImgSrc;
var swapImage = function(src)
{
var imgBut = document.getElementById("ImageButton1");
globalVarPreviousImgSrc = imgBut.src;
imgBut.src = src;
}
Then in the action method you can check if it was equal to the old value
然后在操作方法中，您可以检查它是否等于旧值
function action()
{
if(globalVarPreviousImgSrc != 'images/image2.png')
{
swapImage('images/image2.png');
}else{
swapImage(globalVarPreviousImgSrc);
}
}
回答by swapnesh
Check this a working example just copy paste and run-
检查这个工作示例只需复制粘贴并运行 -
HTML
HTML
<button onClick="action();">click me<img src="http://dummyimage.com/200x200/000000/fff.gif&text=Image+1" width="200px" id="ImageButton1"></button>
JAVASCRIPT
爪哇脚本
<script>
function action()
{
if(document.getElementById("ImageButton1").src == 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1' )
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/dec4ce/fff.gif&text=Image+2';
else
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1';
}
</script>
Check this workingexample - http://jsfiddle.net/QVRUG/4/
检查这个工作示例 - http://jsfiddle.net/QVRUG/4/
回答by Laksitha Ranasingha
It's not a good idea to use global variables in javascripts use a closure or object literal. You can do something like using a closure
在使用闭包或对象字面量的 javascript 中使用全局变量并不是一个好主意。你可以做一些事情，比如使用闭包
(function(){
var clickCounter = 0;
var imgSrc1 = "src to first image";
var imgSrc2 = "src to second image"
functions swapImage (src)
{
var imgBut = document.getElementById("ImageButton1");
imgBut.src = src;
}
function action()
{
if(clickCounter === 1)
{
swapImage(imgSrc1);
--clickCounter;
}else{
swapImage(imgSrc2);
++clickCounter;
}
}
})();
(I haven't run this code though)
（虽然我还没有运行这段代码）
This nice w3documentationgives you best practices.
这个不错的w3documentation为您提供了最佳实践。
