我有这个按钮,有一个图标(图片)。现在,我想做的是点击一个按钮图标(图片)将更改为另一个图标,再次点击它将跳回旧图标。 (如切换原则)。
这是我的按钮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中执行代码,当我点击按钮时,图标(背景图片)会改变并保持不变,直到你再次点击将返回到旧的(如切换系统)
答案 0 :(得分:3)
在支持addEventListener
和Class List 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);
上
答案 1 :(得分:0)
快速解决方案
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可以带给你的奇迹。如果是这样你应该真正查找它,它会让很多东西变得更容易。
答案 2 :(得分:0)
以下是如何在jquery中执行此操作
$(function(){
$("#w8-d-blue").click(function(){
$(this).toggleClass("iconize");
return true;
});
});
要使用jquery,您必须将其添加到页面的head部分:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
然后输入上面的代码。