2013-02-19 97 views
0

改變物體嵌入源,我有以下情形..如何通過jQuery

當用戶訪問我的網站,我展示了用戶從服務器上的一些音頻文件。當用戶點擊一個鏈接時,最終執行jquery函數並將嵌入對象的源改爲選定的文件。

我的腳本是:

​​

鏈接選擇音頻文件。

<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> 

是發生什麼對我來說,當我點擊的鏈接。這首歌在新的頁面中播放。我需要在divmusic中播放帶有嵌入對象的歌曲。

回答

1

如果您有多個鏈接可以加載歌曲,請使用類而不是ID,因爲每個ID在頁面上應該是唯一的。然後,你可以做到這一點,以嵌入的src更改爲被點擊的鏈接的href:

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

e.preventDefault()會阻止瀏覽器試圖轉到文件所在的位置。

+0

它不是爲我工作。當我點擊一個鏈接時,歌曲將在新頁面播放(刷新頁面並將地址更改爲'http:// localhost:8080/skypark/sp/resources/songs/xx21.mp3')。我有不止一個鏈接爲不同的歌曲。 – james 2013-02-19 10:47:57

+0

您需要將其從'id =「song」'更改爲'class =「song」',因爲您應該每頁只使用一次每個ID。 – 2013-02-19 10:53:55

+0

是的,我把id =「song」'改成了'class =「song」' – james 2013-02-19 10:55:23

0

您需要防止元素的默認執行。鏈接的默認執行是 - 打開鏈接。

你可以做什麼:

無論<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()

+0

它不適合我。當我點擊一個鏈接時,歌曲將在新頁面播放(刷新頁面並將地址更改爲'localocal:8080/skypark/sp/resources/songs/xx21.mp3')。 – james 2013-02-19 10:54:13