如何在单击时更改按钮图标
how to change button icon on click?
我有这个按钮,它有一个图标(图片)。现在,我想做的是点击一个按钮图标(图片)就会变成另一个图标,当你再次点击时,它会跳回到旧图标上。(类似于拨动原理)。
这是我的按钮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;
}
这是CSS图标代码:
.w8-button.iconize {
padding-right: 50px !important;
background: url(D:/firstPicture.png) no-repeat 115px center;
}
这就是我在html:中调用按钮的方式
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/>
</li>
有人能告诉我如何用javascript编写代码吗?当我点击按钮时,图标(背景图片)会改变并保持原样,直到你再次点击为止,它会回到旧的(如切换系统)
在支持addEventListener
和ClassListneneneba API的现代浏览器上(它们各自的MDN页面上都提供了垫片,以增加对旧浏览器的支持),您可以这样做。
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
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" />
</li>
Javascript
document.getElementById("w8-d-blue").addEventListener("click", function (e) {
var target = e.target;
target.classList.toggle("iconize");
target.classList.toggle("iconize2");
}, false);
在jsfiddle 上
以下是如何在jquery 中做到这一点
$(function(){
$("#w8-d-blue").click(function(){
$(this).toggleClass("iconize");
return true;
});
});
要使用jquery,您必须将其添加到页面的标题部分:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
然后键入上面的代码。
快速解决方案
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
}
我想你没有意识到Jquery能给你带来的奇迹。如果是这样的话,你真的应该查一下,它会让很多类似的事情变得容易得多。
相关文章:
- 如何在已经有图标的滚动到顶部按钮中添加文本
- 如何将自定义图标添加到 JqGrid 顶级工具栏按钮
- 如何让登录按钮在用户登录时更改为图标
- 更改 JWPlayer 显示图标(播放按钮)的不透明度
- 添加/单击c#asp.netmvc5后禁用和更改按钮图标
- 页面更改时动态更改标题按钮图标,jQuery mobile 1.4.5
- 更新引导程序中的按钮图标
- 使用 Primefaces 5.1 如何在运行时仅使用 javascript 更改按钮图标样式.(没有 AJAX 调用)
- 自定义添加此按钮图标图形
- 如何在单击时更改按钮图标
- 按钮图标
- jQuery -数据库访问失败后的更新按钮图标
- 通过JavaScript切换按钮图标
- 使用javascript/bootstrap时,在onclick上更改按钮图标
- Jquery克隆和更新按钮图标
- 如何使用jQuery在选择HTML控件之外放置一个删除按钮图标
- 制作一个透明的播放按钮图标,就像airbnb网站上的一样
- 传单侧边栏v2:添加按钮&图标
- 如何用javascript改变一个特定的JQuery移动按钮图标
- 如何用javascript改变JQuery移动按钮图标