Html 单击时如何更改按钮图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17354549/
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
how to change button icon on click?
提问by Tine Bertoncelj
I have this button, who have a icon (picture). Now, I want to do is on a click on a button icon (picture) will change to another icon and when you click again it will jump back on old icon. (like toggle principle).
我有这个按钮，上面有一个图标（图片）。现在，我想做的是单击按钮图标（图片）将更改为另一个图标，当您再次单击时，它会跳回到旧图标上。（如切换原理）。
Here is my button CSS code:
这是我的按钮 CSS 代码：
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family: "open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
and here is CSS icon code:
这是 CSS 图标代码：
.w8-button.iconize {
padding-right: 50px !important;
background: url(D:/firstPicture.png) no-repeat 115px center;
}
And this is how I call my button in html:
这就是我在 html 中调用我的按钮的方式：
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/>
</li>
Can somebody tell me how to do code in javascript, that when I click on button, icon (background picture) will change and stay like that, until you click again will go back to old one (like toggle system)
有人可以告诉我如何在 javascript 中编写代码，当我单击按钮时，图标（背景图片）将改变并保持原样，直到您再次单击将返回到旧的（如切换系统）
回答by Xotic750
On a a modern browser that supports addEventListenerand the Class List API(shims are available for both on their respective MDN pages to add support for older broswers), you could do this.
在AA现代的浏览器，支持addEventListener和类列表API（垫片均可用于其各自的MDN网页添加为老年人broswers支持），你可以这样做。
CSS
CSS
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family:"open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
.w8-button.iconize {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img856/3817/ticklf.png") no-repeat 5px center;
}
.w8-button.iconize2 {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img822/1917/crossn.png") no-repeat 5px center;
}
HTML
HTML
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" />
</li>
Javascript
Javascript
document.getElementById("w8-d-blue").addEventListener("click", function (e) {
var target = e.target;
target.classList.toggle("iconize");
target.classList.toggle("iconize2");
}, false);
On jsfiddle
回答by Euphe
Quick solution
快速解决方案
var switch = 0, element = document.getElementById("w8-d-blue"), img1, img2;
element.onclick = function(){
if (switch == 0){
element.style.backgroundImage(img1);
switch = 1;
}
else {
element.style.backgroundImage(img2);
switch = 0
}
I think you are unaware of the wonders Jquery can bring you. If so you should really look it up, it makes many things like that much easier.
我认为您没有意识到 Jquery 可以为您带来的奇迹。如果是这样，你真的应该查一查，它会让很多类似的事情变得容易得多。
回答by reggaemahn
Here is how you can do this in jquery
这是在 jquery 中执行此操作的方法
$(function(){
$("#w8-d-blue").click(function(){
$(this).toggleClass("iconize");
return true;
});
});
To use jquery you'll have to add this to the head section of your page:
要使用 jquery，您必须将其添加到页面的 head 部分：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
and type the above code afterwards.
然后输入上面的代码。
