当用户进入名为top 50的页面时，我只是制作音乐网站，页面中有50个音乐的缩略图，鼠标悬停在它上面显示播放按钮，当他们点击按钮时，它会加载音乐。播放按钮的代码是：
<a href="#" id="song_1"><i class="icon-control-play i-2x"></i></a>
和javascript是：
$(document).ready(function(){
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, [
{
title:"Pay It",
artist:"Oloni",
mp3: "http://all.com/uploads/7/3/3/6/73364003/what_makes_you_beautiful.mp3",
oga: "http://all.com/uploads/7/3/3/6/73364003/what_makes_you_beautiful.ogg",
poster: "images/m0.jpg"
},
{
title:"Lentement",
artist:"Miaow",
mp3: "http://all.com/themes/assets/musics/Miaow-03-Lentement.mp3",
oga: "http://all.com/themes/assets/musics/Miaow-03-Lentement.ogg",
poster: "images/onedirection/whatmakesyoubeautiful.jpg"
},
{
title:"Partir",
artist:"Miaow",
mp3: "http://all.com/themes/assets/musics/Miaow-09-Partir.mp3",
oga: "http://all.com/themes/assets/musics/Miaow-09-Partir.ogg",
poster: "images/m0.jpg"
}
], {
playlistOptions: {
enableRemoveControls: true,
autoPlay: false
},
swfPath: "js/jPlayer",
supplied: "webmv, ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer, function(){
$('.musicbar').removeClass('animate');
$('.jp-play-me').removeClass('active');
$('.jp-play-me').parent('li').removeClass('active');
});
$(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer, function(){
$('.musicbar').addClass('animate');
});
$(document).on('click', '.jp-play-me', function(e){
e && e.preventDefault();
var $this = $(e.target);
if (!$this.is('a')) $this = $this.closest('a');
$('.jp-play-me').not($this).removeClass('active');
$('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');
$this.toggleClass('active');
$this.parent('li').toggleClass('active');
if( !$this.hasClass('active') ){
myPlaylist.pause();
}else{
var i = Math.floor(Math.random() * (1 + 7 - 1));
myPlaylist.play(i);
}
});
// video
$("#jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Big Buck Bunny",
m4v: "http://flatfull.com/themes/assets/video/big_buck_bunny_trailer.m4v",
ogv: "http://flatfull.com/themes/assets/video/big_buck_bunny_trailer.ogv",
webmv: "http://flatfull.com/themes/assets/video/big_buck_bunny_trailer.webm",
poster: "images/m41.jpg"
});
},
swfPath: "js",
supplied: "webmv, ogv, m4v",
size: {
width: "100%",
height: "auto",
cssClass: "jp-video-360p"
},
globalVolume: true,
smoothPlayBar: true,
keyEnabled: true
});
});
页脚中有一个音乐播放器：
<footer
class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide">
</div>
<div class="jp-gui">
<div class="jp-video-play hide">
<a class="jp-video-play-icon">play</a>
</div> <div class="jp-interface">
<div class="jp-controls">
<div>
<a class="jp-previous">
<i class="icon-control-rewind i-lg">
</i>
</a>
</div>
<div>
<a class="jp-play">
<i class="icon-control-play i-2x">
</i>
</a>
<a class="jp-pause hid">
<i class="icon-control-pause i-2x">
</i>
</a>
</div>
<div>
<a class="jp-next">
<i class="icon-control-forward i-lg">
</i>
</a>
</div>
<div class="hide">
<a class="jp-stop">
<i class="fa fa-stop">
</i>
</a>
</div>
<div>
<a class="" data-toggle="dropdown" data-target="#playlist">
<i class="icon-list">
</i>
</a>
</div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info">
</div>
<div class="jp-title text-lt">
<ul>
<li>
</li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm"> <a class="jp-mute" title="mute">
<i class="icon-volume-2">
</i>
</a>
<a class="jp-unmute hid" title="unmute">
<i class="icon-volume-off">
</i>
</a>
</div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter">
</div>
</div>
</div>
<div>
<a class="jp-shuffle" title="shuffle">
<i class="icon-shuffle text-muted">
</i>
</a>
<a class="jp-shuffle-off hid" title="shuffle off">
<i class="icon-shuffle text-lt">
</i>
</a>
</div>
<div>
<a class="jp-repeat" title="repeat">
<i class="icon-loop text-muted">
</i>
</a>
<a class="jp-repeat-off hid" title="repeat off">
<i class="icon-loop text-lt">
</i>
</a>
</div>
<div class="hide">
<a class="jp-full-screen" title="full screen">
<i class="fa fa-expand">
</i>
</a>
<a class="jp-restore-screen" title="restore screen">
<i class="fa fa-compress text-lt">
</i>
</a>
</div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker">
<!-- The method
Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item">
</li>
</ul>
</div>
<div class="jp-no-solution hide">
<span>Update Required</span> To play the media you will need to either update
your browser to a recent version or update your
<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</footer>
当页面加载时，将在播放列表中提及50个文件（上面给出了3个）。 我想要的是当用户点击播放按钮时，其中一个音乐应该开始。按钮ID为song_1
问候
Nai