javascript - 计时器重置关闭按钮一旦点击回到它的“之前”状态后 2 秒

Question

嘿，我一直在试图弄清楚如何在单击按钮后将其重置为之前的状态时遇到了一些困难。我知道这涉及到一个 javascript 时间，任何人都可以帮助我现在整个早上都在尝试。

    function clickMute()
    { if (document.Mute.src=='http://www.showandtell.com/TRUMusicControl/images/BeforeClickMute.png'){

    document.Mute.src='http://www.showandtell.com/TRUMusicControl/images/AfterClickMute.png';
    } 
    else if (document.Mute.src=='http://www.showandtell.com/TRUMusicControl/images/AfterClickMute.png'){

    document.Mute.src='http://www.showandtell.com/TRUMusicControl/images/BeforeClickMute.png';
    }
    }




    <div id= "Mute">
    <a href="#">
     <img id="Mutebutton" name="Mute" onclick="clickMute()" src="images/BeforeClickMute.png" width="140" height="126" />
    </a>

Answer 1

首先，删除a图像周围的（锚）标签（静音按钮）。然后只需使用以下代码（替换您的功能）：

function clickMute(){
    var strPath = "http://www.showandtell.com/TRUMusicControl/images/",
        arrSrc = ["BeforeClickMute.png","AfterClickMute.png"],
        button = document.getElementById("Mutebutton"),
        index = (/Before/i.test(button.src)) ? 1 : 0;
    button.src = strPath + arrSrc[index];

    /* If you need the button to reset itself after a certain time... */
    if (index) setTimeout(clickMute,2000);
}