3

我有这个按钮，上面有一个图标（图片）。现在，我想做的是单击按钮图标（图片）将更改为另一个图标，当您再次单击时，它将跳回旧图标。（如切换原理）。

这是我的按钮 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编写代码，当我点击按钮时，图标（背景图片）会改变并保持不变，直到你再次点击会回到旧的（比如切换系统）

4

3 回答 3

3

在支持addEventListener和类列表 API的现代浏览器上（在它们各自的 MDN 页面上都可以使用 shims 以添加对旧版浏览器的支持），您可以这样做。

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-28T00:31:10.377 回答
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 能给你带来的奇迹。如果是这样，您真的应该查一下，它会使许多类似的事情变得容易得多。

于 2013-06-27T23:00:59.430 回答
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>

然后输入上面的代码。

于 2013-06-27T23:01:36.390 回答