Question

我在弹出窗口中有一个图像，我希望在点击时将其换成另一个图像。我检查localStorage以了解是否应显示“开”或“关”按钮。

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”，因此我的图片应从“on_button.png”翻转为“off_button.png”，但它会继续显示on_button.png。知道我做错了什么吗？感谢。

Answer 1

也许像这样http://jsfiddle.net/EX2hj/1/

Answer 2

当我创建一个随机的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>

chrome扩展弹出窗口中的图像交换

2 个答案: