在您的代码中playerId
是字符串。所以playerId.tracks
无法工作。
因此,您可以使用wp_localize_script
(WP 3.3+):
$playlists = array(
\'playlist150\' => array( \'tracks\'=> array(\'track1\', \'track2\') ),
\'playlist257\' => array( \'tracks\'=> array(\'track3\', \'track4\') )
);
wp_localize_script( \'some_handle\', \'allPlaylists\', $playlists );
然后在js中,使用括号符号检索正确的数组:
jQuery(document).ready(function($) {
$(\'.playlist-item\').each(function() {
var tracks = allPlaylists[playerId].tracks // this is an array
});
});
前一条是一般信息。据我所知,你想用
jPlayerPlaylist object.
我在文档中读到的是,它需要一个实例化,如:
// This is pseudo-code.
var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});
其中,playlist是一组对象,每个对象类似于:
{
title:"The Title",
artist:"The Artist",
free: true,
mp3:"http://www.example.com/songs/track1.mp3",
}
css选择器是一个具有两个属性的对象,必须与必须显示播放器的div相关。
现在,如果您的html容器是:
<div id="playlist150" class="playlist-item"></div>
<div id="playlist257" class="playlist-item"></div>
在插件或函数中。php您必须创建正确的数组,将脚本排队,并以类似以下方式传递数据:
add_action(\'wp_enqueue_scripts\', \'mytracklists\');
function mytracklists() {
$playlists = array(
\'playlist150\' => array(
\'tracks\' => array(
array(
\'title\' => "Track 1",
\'artist\' => "One Artist",
\'free\' => true,
\'mp3\' => "http://www.example.com/songs/track1.mp3",
),
array(
\'title\' => "Track 2",
\'artist\' => "One Artist",
\'free\' => true,
\'mp3\' => "http://www.example.com/songs/track2.mp3",
)
)
),
\'playlist257\' => array(
\'tracks\' => array(
array(
\'title\' => "Track 3",
\'artist\' => "Second Artist",
\'free\' => true,
\'mp3\' => "http://www.example.com/songs/track3.mp3",
),
array(
\'title\' => "Track 4",
\'artist\' => "Second Artist",
\'free\' => true,
\'mp3\' => "http://www.example.com/songs/track4.mp3",
)
)
),
);
wp_register_script(\'jplayer\', get_template_directori_uri() . \'/js/jplayer/jquery.jplayer.min.js\', array(\'jquery\'));
wp_register_script(\'jplayerplaylist\', get_template_directori_uri() . \'/js/jplayer/add-on/jplayer.playlist.min.js\', array(\'jplayer\'));
wp_enqueue_script(\'myplaylists\', get_template_directori_uri() . \'/js//myplaylists.js\', array(\'jplayerplaylist\'));
wp_localize_script( \'myplaylists\', \'allPlaylists\', $playlists );
}
你看我排队了
jplayer
,
jplayerplaylist
和一个名为
myplaylists
应该包含以下内容:
jQuery(document).ready(function($) {
// options, valid for all players
var my_options = {
playlistOptions: {
autoPlay: false,
loopOnPrevious: false,
shuffleOnLoop: true,
enableRemoveControls: false,
displayTime: \'slow\',
addTime: \'fast\',
removeTime: \'fast\',
shuffleTime: \'slow\'
},
supplied: "mp3"
}
// settings for each player
$(\'.playlist-item\').each(function() {
var cssSelector = {
jPlayer: \'#player_\' + $(this).attr(\'id\'),
cssSelectorAncestor: \'#\' + $(this).attr(\'id\')
}
var playerId = $(this).attr(\'id\');
// create and populate the playlist array
// taking data from objet passed via wp_localize_script
var playlist = new Array();
$.each( allPlaylists[playerId].tracks, function(i, value) {
playlist.push(value);
})
// instanciate jPlayerPlaylist
var myPlayer = new jPlayerPlaylist( cssSelector, playlist, my_options );
});
});
因此,迭代div脚本创建
cssSelector
对象并创建包含轨迹的对象数组。之后,使用这些变量(和options对象)实例化
jPlayerPlaylist
对象