Question

我使用WordPress。我的网站上有一个音频播放器。当用户单击单个歌曲上的播放按钮时，它将播放该歌曲。帖子ID是玩家如何确定要播放的歌曲。

所以在包装按钮标签的DIV中，我指定了一个属性：data-id，这是该歌曲的帖子ID。我的应用程序然后抓取与该帖子ID相关联的MP3文件。简单。

我的播放按钮标签基本上是这样的：

<div class="item item-action" data-id="1161">
  <button class="btn-playpause"></button>
</div>

处理点击事件并播放歌曲的我的player.js文件的重要部分如下：

模拟播放按钮

// simulate the play btn
  $(document).on('click.btn', '.btn-playpause, .btn-queque', function(e){
      e.stopPropagation();
      var self = $(this),
          item = $(this).closest('.item'),
          id = item.attr('data-id'),
          type = item.data('user-id') ? 'user' : 'post',
          play = true;

      if(!player){
        getItem(id, type).done(function(obj){
          if(obj.status == 'success'){
            mep.mepPlaylistTracks = obj.tracks;
            initPlayer();
            player && player.mepSelect(0, true);
          }
        });
        return;
      }

      if(self.is('.btn-queque')){
        play = false;
        self.parent().dropdown('toggle');
      }
      if( self.hasClass('is-playing') ){
        self.removeClass('is-playing');
        player.pause();
      }else{
        var index = player.find(id);
        if( index !== -1){
          var track = player.mepGetCurrentTrack();
          if(track && track.id == id && !play) return;
          player.mepSelect(index, true);
        }else{
          getItem(id, type).done(function(obj){
            if(obj.status == 'success'){
              addToPlay(obj.tracks, play);
            }
          });
        }
      }
  });

getItem（）函数

function getItem(id, type){
    return $.ajax({
       type : "post",
       dataType : "json",
       url : ajax.ajax_url,
       data : {action: "ajax_music", id : id, type: type, nonce: ajax.nonce}
    });
  }

addToPlay（）函数

function addToPlay(obj, play){
    if(obj.length == 1){
      player.mepAdd( obj[0], play );
    }else if(obj.length > 1){
      if(play){
        player.options.mepPlaylistTracks = obj;
        player.updatemepList();
        player.mepSelect(0, true);
      }else{
        for(var i=0; i<obj.length; i++){
          player.mepAdd( obj[i] );
        }
      }
    }
  }

您可以看到，单击播放按钮后，根据条件，它会触发getItem()功能。 getItem（）将之前定义的data-id属性作为id变量并开始播放该歌曲。

如果播放器的实例已经打开，addToPlay()功能会将另一首歌曲添加到播放列表中。当用户点击另一个播放按钮时，它会将新歌添加到列表中并开始播放该歌曲。

是否可以修改此代码，以便我可以将多个data-id值添加到我的按钮代码中，这样我的脚本就会识别出有多个歌曲ID并使用{{1}将其添加到我的播放列表中功能？

我想做这样的事情

addToPlay()

我想要这样做的原因是，我想添加一项功能，允许我的用户在他们正在查看的当前页面上播放所有歌曲。我们的一些页面，如目录页面，显示符合特定标准的数十首歌曲，我希望可以选择播放页面上的所有歌曲。

任何人都可以帮我推动正确的方向吗？

感谢。

Answer 1

您可以在data-id标记中存储JSON编码的数组。像：

<div class="item item-action" data-id='[1161, 1288, 1456]'>
  <button class="btn-playpause"></button>
</div>

然后你可以解析数组，并遍历其内容，将每个id添加到队列中。

请参阅此处解析的示例：https://gist.github.com/charliepark/4266921

Answer 2

在这里，我提出一种替代方法。

在标记中，您可以将data-id='[1234]属性设置为编码数组。然后，您可以收集这些属性并将其设置为使用jQuery的给定元素上的数据id属性，如下所示：

let someElement = $('.item');
let setItems = someElement.data('id');
let thisItem = someElement.attr('data-id');

重要提示：如果someElement.data('id')尚未为元素设置someElement.attr('data-id')，则someElement.data('id',[567,890]);返回的内容与id相同（作为字符串除外） someElement。因此，一旦设定这样

let x = someElement.data('id'); // returns the array 567,890
let org = someElement.attr('data-id'); // still returns the [1234]

此代码说明：

let someElement = $('.item').first();
let setItems = someElement.data('id');
let thisItemS = someElement.attr('data-id');
// make an array of the string
let thisItem = JSON.parse(thisItemS);
console.log(typeof setItems, setItems, typeof thisItemS, thisItemS, typeof thisItem, thisItem);
someElement.data('id', [567, 890]);
let x = someElement.data('id'); // returns and gets the array 567,890
let org = JSON.parse(someElement.attr('data-id')); // still returns the string [1234] made into an array
// merge with no duplicates, in the other code I used .map()
let z = Array.from(new Set(x.concat(org)));
console.log(x, org, z);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class='item' data-id='[1234]'>me the item</div>

此代码使用以上介绍的概念显示了一组元素：

设置一些复选框以供选择
获取值（全部）
获取值（选中复选框）

您可以为自己的原始目的组合其中的任何一个，但是您将需要管理在给定元素上添加的新项目值（以及随后如何删除）。你甚至可以添加到<select>元素，使用户可以再挑选一些或许删除......

function showPicks(choicedata) {
  let ul = $('#choices').append('<ul />');
  //ul.remove('li');
  ul.html('empty');
  ul.text('choices:');
  $.each(choicedata, function(index, choice) {
    let c = $('<li/>').html(choice);
    ul.append(c);
  });
}
$(function() {
  let mydata = $('.item').map(function() {
    return $(this).data('id');
  }).get();
  $('.all-items').data("id", mydata);
  showPicks(mydata); //now do what is desired
});

$('item.item-action').filter(':not(".some-items")')
  .on('click', '.btn-playpause', function() {
    let setItems = $(this).closest('.item').data('id');
    let thisItem = $(this).closest('.item').attr('data-id');
    // do what you wish here, I show them
    showPicks(setItems);
  });
$('.some-items').on('click', '.btn-playpause', function(event) {
  let mydata = $('.item-select').filter(':checked')
    .add(this) // set an additional one from the button
    .closest('.item')
    .map(function() {
      return $(this).data('id');
    }).get();
  $(event.delegatedTarget).data("id", mydata);
  let setItems = $(event.delegatedTarget).data('id');
  // the original pick
  let thisItem = $(event.delegatedTarget).attr('data-id');
  // do what you wish here
  showPicks(mydata);
});

  .btn-playpause {
  height: 2em;
  )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="item item-action" data-id="[1161]">
  <button class="btn-playpause" type="button"></button>
  <input type="checkbox" class="item-select" />
</div>
<div class="item item-action" data-id="[1163]">
  <button class="btn-playpause"></button>
  <input type="checkbox" class="item-select" />
</div>
<div class="item item-action" data-id="[9961,7744]">
  <button class="btn-playpause" type="button"></button>
  <input type="checkbox" class="item-select" />
</div>
<div class="item item-action all-items" data-id="[42]">
  <button class="btn-playpause" type="button">Play All</button>
</div>
<div class="item item-action some-items" data-id="[95]">
  <button class="btn-playpause" type="button">Play selected</button>
</div>
<div id="choices">none</div>

我可以将多个data-id值分配给一个元素中的一个属性吗？

是否可以修改此代码，以便我可以将多个data-id值添加到我的按钮代码中，这样我的脚本就会识别出有多个歌曲ID并使用{{1}将其添加到我的播放列表中功能？

2 个答案: