jquery - 将jquery整合到WordPress中

Question

我正在尝试将非常简单的音频播放器合并到WordPress中，该播放器使用jQuery来控制播放器和播放器控制背景图像。单个页面上会有多个播放器实例。

我为HTML页面编写代码没有问题，但是在WordPress页面中无法正常工作。我已经使用Google搜索了几个小时，但没有找到我需要的具体，可理解的答案，因此，如果其他地方都没有找到我，我深表歉意。

我不想编写插件，我只想能够对HTML5音频播放器创建一点控制。

脚本代码:

$(document).ready(function(){
var allAudioEls = $('audio');

function pauseAllAudio(){
    $('.gac_play').attr('src', 'play16.png');
    allAudioEls.each(function() {
        var a = $(this).get(0);
        a.pause();
    });
}


$(".gac_play").click(function(){
    var song = $(this).next('audio').get(0);
    if(song.paused){
        pauseAllAudio();
        $(this).attr('src', 'pause16.png');
        song.play();
    }else{
        pauseAllAudio();
        $(this).attr('src', 'play16.png');
    }
});

HTML:

<img class="gac_play" src="play16.png" />
<audio>
<source src="audio/fm-sample1.mp3" />
<source src="audio/fm-sample1.ogg" />
</audio>

可以在HTML页面上完美运行，但不能在WordPress中运行。任何帮助将不胜感激。

Answer 1

确保您正确地将jQuery文件的放入并使用您的ready函数，例如:

jQuery(document).ready(function($){
 // your code goes here
});

或者，您可以在脚本标签的开头使用$=jQuery.noConflict();。您可以在JS控制台中检查其他错误(chrome 上的 Ctrl + Shift + J)。