Problema di trasmissione di oggetti specifici per ID a javascript via wp_localize_script

Sto usando wp_localize_script per passare più matrici di dati in un file javascript. Per distinguere tra i diversi array (e prevenire la sovrascrittura), vengono etichettati in relazione all’id post da cui hanno avuto origine.

Gli oggetti che devo usare nel file js sono come questo, ad esempio:

playlist150.tracks playlist257.tracks 

Ho impostato gli elementi DOM per abbinare il nome dell’object, ad esempio:

 

All’interno del file javascript, ho il seguente:

 jQuery(document).ready(function($) { $('.playlist-item').each(function() { var playerId = $(this).attr('id'); var music = new jPlayerPlaylist({ playerId.tracks }); }); }); 

Il problema che sto avendo è che mentre il valore di playerId è uguale al nome degli oggetti passati nel file javascript (in questo caso, playlist150 o playlist257), non funziona come sostituto.

Devo mancare qualche concetto base di oggetti javascript qui, per favore aiutatemi!

Solutions Collecting From Web of "Problema di trasmissione di oggetti specifici per ID a javascript via wp_localize_script"

Nel tuo codice playerId è una stringa. Quindi playerId.tracks non può funzionare.

Quindi puoi creare un array multidimensionale con 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 ); 

Quindi nella js utilizzare la notazione della parentesi per recuperare la matrice corretta:

 jQuery(document).ready(function($) { $('.playlist-item').each(function() { var tracks = allPlaylists[playerId].tracks // this is an array }); }); 

Il precedente era un’informazione generica. Per quello che capisco, vuoi usare l’object jPlayerPlaylist .

Quello che ho letto in quella documentazione è che ha bisogno di un’istanza come:

 // This is pseudo-code. var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options}); 

Nei casi in cui la playlist è una serie di oggetti, ognuno di essi è simile a:

 { title:"The Title", artist:"The Artist", free: true, mp3:"http://www.example.com/songs/track1.mp3", } 

e il selettore di CSS è un object con due proprietà e mi deve essere correlato al div in cui il giocatore deve essere mostrato.

Ora, se i tuoi contenitori html sono:

 

in un plugin o functions.php devi creare gli array giusti, accodare gli script e trasmettere i dati in un modo simile a questo:

 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 ); } 

Vedete ho jplayer , jplayerplaylist e uno script personalizzato chiamato myplaylists che dovrebbe contenere qualcosa come:

 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 ); }); }); 

Quindi, iterando il div lo script crea l’object cssSelector e crea una serie di oggetti contenenti le tracce. Dopodiché usa queste variabili (e l’object options) per instanciare l’object jPlayerPlaylist .