如何更改点击按钮图标？

我有这个按钮，谁有一个图标（图片）。现在，我想要做的就是点击一个按钮图标（图片）会变成另一个图标，当您再次点击它时会跳回到旧图标上。（如切换原理）。如何更改点击按钮图标？

这里是我的按钮的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中执行代码，当我点击按钮时，图标（背景图片）将会改变并保持那样，un直到你再次点击将回到旧的（如切换系统）

来源

2013-06-27 Tine Bertoncelj

你愿意使用jQuery？它的'.toggleClass（）'函数非常适合这个。 – Barmar

在您努力编写问题之前，我建议您寻找解决此问题的现有答案。像http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript＆http://stackoverflow.com/questions/11006406/jquery-toggle-css-class这样的答案详情。 – Swordfish0321

在一个支持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);

在jsfiddle

来源

2013-06-28 00:31:10 Xotic750

谢谢。你只是救我的神经。这个演示帮了我很多。只是万次感谢你。 –

+1好答案！不知道'classList'。对于OP：请注意其支持（您可能需要使用垫片）：http：//caniuse.com/classlist – acdcjunior

快速解决方案

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的可以给你带来的。如果是这样，你应该真正查找它，这使得许多事情更容易。

来源

2013-06-27 23:00:59 Euphe

你是1）假设他正在使用jQuery，2）将jQuery解决方案与DOM解决方案混合在一起，这是你不应该做的。如果OP选择jQuery解决方案，他/她应该使用.toggleClass（）。 – Swordfish0321

我的不好，编辑它，所以只剩下他需要的功能。 – Euphe

这里是你如何在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>

，并输入上面的代码之后。

来源

2013-06-27 23:01:36

除非您正在编写基于布尔值的单元测试，否则返回true不是必需的。 – Swordfish0321

@ Swordfish0321据了解，在某些浏览器（IE浏览器）中会导致问题，因为它可能会阻止该按钮应该执行的实际功能。我们希望工作流程在图形更改完成后继续。 –

你在说哪个版本的IE？首先使用jQuery的全部目的不仅仅是简化JS，还包括隐式的跨浏览器兼容性。所以你基本上说，未定义的函数在IE中打破jQuery ...不是真正的先生。 – Swordfish0321

如何更改点击按钮图标？

回答

相关问题