Problem beim Weiterleiten von ID-spezifischen Objekten an JavaScript über wp_localize_script

Ich verwende wp_localize_script, um mehrere Datenfelder in eine Javascript-Datei zu übergeben. Um zwischen den verschiedenen Arrays zu unterscheiden (und das Überschreiben zu verhindern), werden sie relativ zu der Post-ID bezeichnet, von der sie stammen.

Die Objekte, die ich in der js-Datei verwenden muss, sind zum Beispiel:

playlist150.tracks playlist257.tracks 

Ich habe DOM-Elemente so eingestellt, dass sie dem Objektnamen entsprechen, zum Beispiel:

 

Innerhalb der Javascript-Datei habe ich Folgendes:

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

Das Problem, das ich habe, ist, dass, während der Wert von playerId gleich dem Namen der Objekte ist, die in die Javascript-Datei (in diesem Fall playlist150 oder playlist257) übergeben werden, es nicht als Ersatz funktioniert.

Ich muss ein Grundkonzept von JavaScript-Objekten hier fehlen, bitte helfen Sie!

Solutions Collecting From Web of "Problem beim Weiterleiten von ID-spezifischen Objekten an JavaScript über wp_localize_script"

In Ihrem Code ist playerId eine Zeichenfolge. So kann playerId.tracks nicht funktionieren.

Sie können also ein mehrdimensionales Array mit wp_localize_script (WP 3.3+) erstellen:

 $playlists = array( 'playlist150' => array( 'tracks'=> array('track1', 'track2') ), 'playlist257' => array( 'tracks'=> array('track3', 'track4') ) ); wp_localize_script( 'some_handle', 'allPlaylists', $playlists ); 

Dann benutze in der js die Klammer-Notation, um das richtige Array zu erhalten:

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

Das vorherige war eine allgemeine Information. Soweit ich weiß, möchten Sie das Objekt jPlayerPlaylist verwenden .

Was ich in diesen Dokumenten gelesen habe, ist eine Instanziierung wie:

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

Wo Playlist ein Array von Objekten ist, ist jedes etwas wie:

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

und der CSS-Selektor ist ein Objekt mit zwei Eigenschaften, und ich muss mich auf div beziehen, in dem der Spieler gezeigt werden muss.

Nun, wenn Ihre HTML-Container sind:

 

in einem plugin oder functions.php musst du die richtigen arrays erstellen, die scripte in die reihe stellen und die daten auf folgende weise weitergeben:

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

Sie sehen, dass ich jplayer, jplayerplaylist und ein benutzerdefiniertes Skript namens myplaylists die myplaylists , die etwas enthalten sollten:

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

cssSelector also das div-Skript iterieren, erstellen Sie das cssSelector Objekt und erstellen Sie ein Array von Objekten, die die Spuren enthalten. Verwenden Sie anschließend diese Variable (und das Optionsobjekt), um das jPlayerPlaylist Objekt zu installieren.