javascript - Zoomsounds：通过数据源属性将新文件加载到 div

Question

我正在使用一个名为 ZoomSounds 的 javascript 音频播放器。它创建一个圆形播放按钮的 div 并将内容加载到其中，如下所示：

<div id="ap3" class="audioplayer-tobe skin-minimal" style="position:absolute; width:100px;" data-type="normal" data-source="sounds/edge.mp3"></div>

我想做的是在页面上有其他文件，并通过单击它们的链接将它们加载到同一个 div (ap3) 中。ZoomSounds 似乎没有任何支持，似乎浪费了一个不错的小插件。有没有一种简单的方法可以做到这一点？谢谢你。

Answer 1

我认为答案取决于该插件对数据属性的操作以及何时执行，但如果您只想替换div#ap3的数据属性，则可以使用 jQuery.

因此，假设您在锚标记中引用了另一个文件，如下所示：

<a class="replace1" href="sounds/replacement.mp3">The Replacement MP3</a>

您可以获取该 href 并用它替换 div#ap3 数据源属性，如下所示：

(function($) {
    $("a.replace1").click(function(e){
        e.preventDefault();
        var hrefReplacement = $(this).attr('href');
        $("div#ap3").data("source",hrefReplacement);
    });
})(jQuery);