通过wp_LOCALIZE_SCRIPT将特定于id的对象传递给javascript时出现问题

时间:2013-09-08 作者:George

我使用wp\\u localize\\u脚本将多个数据数组传递到javascript文件中。为了区分不同的数组(并防止覆盖),它们的标签相对于它们来源的post id。

我需要在js文件中使用的对象如下所示,例如:

playlist150.tracks
playlist257.tracks
我已将DOM元素设置为与对象名称匹配,例如:

<div id="playlist150" class="playlist-item"></div>

<div id="playlist257" class="playlist-item"></div>
在javascript文件中,我有以下内容:

jQuery(document).ready(function($) {

  $(\'.playlist-item\').each(function() {

    var playerId = $(this).attr(\'id\');

    var music = new jPlayerPlaylist({
      playerId.tracks
    });      

  });

});
我遇到的问题是,虽然playerId的值等于传递到javascript文件中的对象的名称(在本例中为playlay150或playlay257),但它不能替代。

这里我一定缺少一些javascript对象的基本概念,请帮忙!

1 个回复
最合适的回答,由SO网友:gmazzap 整理而成

在您的代码中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 对象

结束

相关推荐

JQuery问题和wp_enQueue_脚本

实际上,我有一个主题,用于插入jquery代码和核心参考以及jquery iu总线发生了一些我不理解的事情,实际上正如我所说的,直到我需要插入代码来创建图像幻灯片,简单的幻灯片和流行的插件,这些插件在单页中工作非常完美为此,我创建了简单的快捷码并显示图像,然后将其移动到幻灯片中当我创建这个显示图像但不移动的快捷码时,我看到插件的代码是否加载到DOM中,我看到了完美的引用,并且在主题的头部和加载页面时也看到了对jquery核心的引用我看到一次又一次,滑块不起作用,最后我把jquery的参考远程代码放在了r