时间戳

首页 > 解决方案 > 如何使这个内联 JavaScript 外部化？

javascript - 如何使这个内联 JavaScript 外部化？

问题描述

我目前正在开发音乐播放器 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");        
}

}

当然，对于 prev 函数和 next 函数，我有相同的问题，但它们都应该具有我假设的相同解决方案。

标签： javascripthtmlgoogle-chrome-extension

解决方案

就您已经在使用 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 标记完全分离。

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

推荐阅读