jquery - WordPress wpaudio soundmanager 插件的备用播放/暂停按钮

Question

我正在使用 wpaudio 插件将 mp3 链接转换为 javascript/flash 音频播放器。我的问题是我在我网站的两个区域使用这个插件:一个在黑色背景上，一个在白色背景上。我需要为每个页面使用一组备用的播放/暂停按钮(黑色背景为白色按钮，反之亦然)。我完全不知道该怎么做。

我需要了解如何将“if page is...”语句合并到 wpaudio.js 中，但我不知道如何使用 jQuery 执行此操作。

这是我认为需要修改的插件代码:

jQuery(this).prepend('<img id="wpa' + wpa_id + '_play" class="wpa_play" src="' + wpa_url + '/wpa_play.gif">');

和:

function wpaButtonCheck() {
    if (!this.playState || this.paused)
        jQuery('#' + this.sID + '_play').attr('src', wpa_url + '/wpa_play.gif');
    else
        jQuery('#' + this.sID + '_play').attr('src', wpa_url + '/wpa_pause.gif');
}

插件以下列格式将元素添加到 DOM:

<img src="http://24.232.185.173/wordpress/wp-content/plugins/wpaudio-mp3-player/wpa_play.gif" class="wpa_play" id="wpa0_play">

Answer 1

好的，我现在明白了。

您需要做的不是设置 src 属性来显示正确的图像。在同一图像中包含两种类型的图像。例如，您将拥有一个更大的 wpa_play.gif 而不是 wpa_play.gif，其中包含用于背景背景和白色背景的 wpa_play。但其容器的大小仅为其中一个按钮的大小。

然后你在不同页面的css中使用backgound-position来显示按钮的正确部分