Question

我有以下情况..

当用户访问我的网站时，我会向用户显示服务器中的一些音频文件。当用户单击一个链接时，最终会执行jquery函数并将嵌入对象的源更改为所选文件。

我的脚本是：

<script type="text/javascript">
    $("#song").click(function(){
        var src=$(this).attr("href");
        var plyr=document.getElementById("mplayer");
        var clone=plyr.cloneNode(true);
        clone.setAttribute('src',src);
        plyr.parentNode.replaceChild(clone,plyr)
    });
</script>

选择音频文件的链接。

  <a href="resources/songs/xx21.mp3" id="song">

XX21

对象是

<div id="music">
    <embed type="audio/mpeg" src="#" name="plugin" height="100%" width="100%" id="mplayer">
</div>

当我点击链接时，发生了什么事。这首歌在新的页面播放。我需要在div music内播放带有嵌入对象的歌曲。

Answer 1

如果您有多个链接可以加载歌曲，请使用类而不是ID，因为每个ID在页面上应该是唯一的。然后你可以这样做来将嵌入的src更改为被点击的链接的href：

$('.song').on('click', function(e) {
    $('#mplayer').attr('src', $(this).attr('href'));
    e.preventDefault();
});

e.preventDefault()会阻止您的浏览器尝试转到该文件的位置。

Answer 2

您需要阻止元素的默认执行。链接的默认执行是 - 打开链接。

你能做什么：

<a href="link-to-sound" onClick="return false;">或

<script type="text/javascript">
$(".song").click(function(event){
event.preventDefault();
var src=$(this).attr("href");
var plyr=document.getElementById("mplayer");
var clone=plyr.cloneNode(true);
clone.setAttribute('src',src);
plyr.parentNode.replaceChild(clone,plyr)
});
</script>

您需要添加event.preventDefault()

如何通过jquery更改对象嵌入源

2 个答案: