Question

在一个简单的jQuery mp3播放器中，我有一个按钮来加载一些文件

  <button type="button" class="nes-btn is-primary" onclick="chooseMusic()">Add</button>

相关的jQuery函数如下

let songData = {
  path: [],
  title: []
};
let audioPlayer = $("audio").get(0);
let playing = false;
let currentIndex = 0;
let timer = null;

function chooseMusic() {
  $("input").click();
}

function musicSelected() {
  let files = $("input").get(0).files;
  console.log(files);

  for (let i = 0; i < files.length; i++) {
    let {path} = files[i];
    mm.parseFile(path, {
      native: true
    }).then(metadata => {
      songData.path[i] = path;
      songData.title[i] = metadata.common.title;

      let songRow = `
            <tr ondblclick="playSong(${i})">
                <td>${metadata.common.title}</td>
                <td>${metadata.common.artist}</td>
                <td>${secondsToTime(metadata.format.duration)}</td>
            </tr>
            `;

      $("#table-body").append(songRow);
    });
  }
}

现在，如果在初始添加操作之后添加更多歌曲，它们在html表中都可以正常显示，但是保存要加载文件的路径信息的数组将被覆盖。

在下面的示例中，您可以看到控制台输出3种不同的添加操作：

0: File {name: "03 Take My Hand (Freddy@Disco Radio Edit).mp3", path: ".david/musik/mp3/03 Take My Hand (Freddy@Disco Radio Edit).mp3", lastModified: 1573134194616, lastModifiedDate: Thu Nov 07 2019 14:43:14 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
1: File {name: "01 Almeno stavolta.mp3", path: ".david/musik/mp3/01 Almeno stavolta.mp3", lastModified: 1573134333350, lastModifiedDate: Thu Nov 07 2019 14:45:33 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
2: File {name: "01 Dancing Is Like Heaven (Single Mix) [feat. Yas].mp3", path: ".david/musik/…ncing Is Like Heaven (Single Mix) [feat. Yas].mp3", lastModified: 1573134290426, lastModifiedDate: Thu Nov 07 2019 14:44:50 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
3: File {name: "08 Take My Hand (DJ Maraach Remix).mp3", path: ".david/musik/mp3/08 Take My Hand (DJ Maraach Remix).mp3", lastModified: 1573134220015, lastModifiedDate: Thu Nov 07 2019 14:43:40 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
length: 4
__proto__: FileList
29
index.js:102 tick
index.js:18 
FileList {0: File, 1: File, length: 2}
0: File {name: "01 Carry You.m4a", path: ".david/musik/mp3/01 Carry You.m4a", lastModified: 1573133939823, lastModifiedDate: Thu Nov 07 2019 14:38:59 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
1: File {name: "05 Mercury May.mp3", path: ".david/musik/mp3/05 Mercury May.mp3", lastModified: 1573133848536, lastModifiedDate: Thu Nov 07 2019 14:37:28 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
length: 2
__proto__: FileList
231
index.js:102 tick
index.js:67 0
42
index.js:102 tick
index.js:67 1
935
index.js:102 tick
index.js:18 
FileList {0: File, 1: File, 2: File, 3: File, 4: File, 5: File, length: 6}
0: File {name: "01 Mad About You.mp3", path: ".david/musik/mp3/01 Mad About You.mp3", lastModified: 1572570292000, lastModifiedDate: Fri Nov 01 2019 02:04:52 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
1: File {name: "04 Sit and Wait.mp3", path: ".david/musik/mp3/04 Sit and Wait.mp3", lastModified: 1572570182000, lastModifiedDate: Fri Nov 01 2019 02:03:02 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
2: File {name: "01 Wavin' Flag (Coca-Cola Celebration Mix).mp3", path: ".david/musik/mp3/01 Wavin' Flag (Coca-Cola Celebration Mix).mp3", lastModified: 1572487402000, lastModifiedDate: Thu Oct 31 2019 03:03:22 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
3: File {name: "05 Land of Dreaming.mp3", path: ".david/musik/mp3/05 Land of Dreaming.mp3", lastModified: 1572487316000, lastModifiedDate: Thu Oct 31 2019 03:01:56 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
4: File {name: "02 Solo.mp3", path: ".david/musik/mp3/02 Solo.mp3", lastModified: 1572487132000, lastModifiedDate: Thu Oct 31 2019 02:58:52 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
5: File {name: "10 Postcards.mp3", path: ".david/musik/mp3/10 Postcards.mp3", lastModified: 1572486513000, lastModifiedDate: Thu Oct 31 2019 02:48:33 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
length: 6
__proto__: FileList

现在，如果我单击例如“握住我的手”（我添加的第一个文件），它将代替“播放关于您的疯子”，因为它占据了数组的位置0。

那么，如何更改jQuery函数以确保在添加新文件时将其添加到同一数组中而不覆盖键？

Answer 1

我建议您稍微更改一下代码。

而不是像这样具有两个数组的对象：

let songData = {
  path: [],
  title: []
};

您应该有一个这样的对象数组

let songData = [
  { path: 'Path-1', title: 'Title 1'}, 
  { path: 'Path-2', title: 'Title 3'}, 
  { ... }
];

然后，当您添加新元素时，只需要将push()新对象添加到数组中

for (let i = 0; i < files.length; i++) {
  // ...
  let obj = { 'path' : path, 'title' : metadata.common.title };
  songData.push(obj); // this will add it at the end of the array (like append does for a jQuery element)
  // ...
}

这样，所有信息都存储在同一个对象中，而不是两个不同的数组中。如果索引不再同步，这也减少了出错的机会。此外，如果需要，可以更轻松地删除元素或切换元素。

阅读评论后进行编辑

因此，要访问新值，您将需要使用对象表示法语法。

songData[0].path;
songData[0].title;

[0]是您的索引。

示例：

function playSong(index){
  console.log(songData[index].path);
  console.log(songData[index].title);
}

只需确保双击（0、1、2、3等）传递索引；

对于第一个元素，

playSong(${i})应该等于playSong(0)。

如果您坚持保留当前代码，则问题在于导入新文件时会覆盖索引

for (let i = 0; i < files.length; i++) {
  //...
  songData.path[i] = path;
  songData.title[i] = metadata.common.title;

[i]会在每次添加文件时覆盖，因为它始终为0、1、2 ...，下次导入时，它将再次为0、1，等等。

要解决此问题，只需使用.push()

将项目添加到数组的末尾

for (let i = 0; i < files.length; i++) {
  //...
  songData.path.push(path);
  songData.title.push(metadata.common.title);
  //...

jQuery将元素追加到对象数组

1 个答案: