如何更改點擊按鈕圖標？

我有這個按鈕，誰有一個圖標（圖片）。現在，我想要做的就是點擊一個按鈕圖標（圖片）會變成另一個圖標，當您再次點擊它時會跳回到舊圖標上。（如切換原理）。如何更改點擊按鈕圖標？

這裏是我的按鈕的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

如何更改點擊按鈕圖標？

回答

相關問題