如何使该内联JavaScript成为外部？

Question

我目前正在开发音乐播放器chrome扩展程序，但我的HTML无法响应。 我发现这是因为我的onclick函数具有嵌入式javascript。

HTML：

<button id="pre" onclick="prev()"><img src="images/prev.png" height="90%" width="90%"/></button>
            <button id="play" onclick="playOrPauseSong()"><img src="images/play.png"/></button>
            <button id="next" onclick="next()"><img src="images/next.png" height="90%" width="90%"/></button>

JavaScript的：

function playOrPauseSong(){

if(song.paused)
{
    song.play();
    $("#play img").attr("src","images/pause.png");
}
else
{
    song.pause();
    $("#play img").attr("src","images/play.png");        
}

}

我对上一个功能和下一个功能有相同的问题，但是它们都应具有与我假定的相同的解决方案。

Answer 1

只要您已经在使用jQuery（如果没有，一切都不会改变），您就可以享受jQuery提供的事件绑定方法，例如：

HTML：

<button id="play">
    <img src="images/play.png"/>
</button>

JavaScript的：

$("#play").on("click", function() {
    if(song.paused) {
        song.play();
        $("#play img").attr("src","images/pause.png");
    }
    else {
        song.pause();
        $("#play img").attr("src","images/play.png");        
    }
}

这样，您的JavaScript代码可以与HTML标记完全分开。

附注：我会发表评论，但没有足够的声誉。