在Chrome擴展彈出式菜單中的圖像交換

我有一個彈出窗口中的圖像，我想在點擊時用另一個圖像換出。我檢查localStorage以瞭解是否應顯示「開」或「關」按鈕。在Chrome擴展彈出式菜單中的圖像交換

popup.html：

<body> 
<div> 
<img id="onOffButton" src="img/on_button.png" onclick="onOff()" /> 
</div> 
</body>

popup.js：

function onOff() { 
    var onOffButton = document.getElementById("onOffButton"); 

    if (localStorage.ToneSet === "off") { 
     onOffButton.src="img/on_button.png"; 
    } else { 
     onOffButton.src="img/off_button.png"; 
    } 
}

目前我localStorage.ToneSet被設置爲「開」，所以我的形象應該從「on_button.png」到「off_button翻轉。 PNG「，但它繼續顯示on_button.png。任何想法我做錯了什麼？謝謝。

來源

2012-03-26 jack

也許這樣的事情http://jsfiddle.net/EX2hj/1/

來源

2012-03-26 03:06:41 zenril

不知道爲什麼，我原來的做法未能奏效，但我可以以應用示例代碼到一個可行的解決方案。謝謝zenril！ – jack 2012-03-26 03:40:29

我不知道這個工作對我來說，當我創建了一個隨機的test.html

<div id="onOffButton" style='width:200px;height:200px;border:1px solid' onclick='toggle()'> </div> 
<script> 
    function toggle(){ 
     alert("a"); 
     var onOffButton = document.getElementById("onOffButton"); 
     if (localStorage.ToneSet == "off") { 
      onOffButton.style.background = "red"; 
      localStorage.ToneSet = "on"; 
     } else { 
      onOffButton.style.background = "green"; 
      localStorage.ToneSet = "off"; 
     } 
    } 
    toggle(); 
</script>

來源

2012-03-26 04:00:54 zenril

在Chrome擴展彈出式菜單中的圖像交換

回答

相關問題