为什么这个循环会改变每一轮的所有值

Question

我正在尝试创建一个函数来获取音频文件的 url 数组，然后为每个音频对象获取其持续时间并将其添加到相应的 html 元素中。

这是我的代码：

var audio, musicArray;
musicArray = [
  "https://dl.dropboxusercontent.com/u/33538012/music/music1.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music2.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music3.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music4.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music5.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music6.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music7.mp3", "https://dl.dropboxusercontent.com/u/33538012/music/music8.mp3"
];

audio = new Audio();

addDuration(musicArray);

function addDuration(array) {
  var x = 1;
  $.each(array, function() {
    audio.src = array[x];
    $(audio).on("loadedmetadata", function() { //front
      $("li#row" + x).html(audio.duration);
    });
  });
}

HTML:

<ul>
  <li class="row1"></li>
  <li class="row2"></li>
  <li class="row3"></li>
  <li class="row4"></li>
  <li class="row5"></li>
  <li class="row6"></li>
  <li class="row7"></li>
  <li class="row8"></li>
  <li class="row9"></li>
</ul>

它假设在其右侧 html 元素中显示每首歌曲的持续时间。例如：row1 == musicArray [1]

编辑：这个问题与可能重复的问题完全不同。甚至解决它的代码和方法都不一样。

知道怎么做吗？

Answer 1

稍微重新安排一下，您的代码就可以做您想做的事

var musicArray;
musicArray = [...];

addDuration(musicArray);

function addDuration(array) {
    $.each(array, function (index, src) { // index is 0...array.length - 1
        var audio = new Audio(); // new audio object for each bit of audio
        $(audio).on("loadedmetadata", function () { //front
            $("li#row" + (index+1)).html(audio.duration); // index+1 because your li's are 1...n, and array indexes are 0...(arry.length-1)
        });
        audio.src = src; // add the source AFTER adding the event listener - maybe not necessary, but what if the event fires before you have a listener for it?
    });
}

我在代码中添加了注释，希望这足以帮助

但是...总之有些解释

$.each 调用的函数使用多个参数调用

function(index, arrayitem, ...) - 因此，您不需要在函数内部使用 musicArray[index]，因为它由 arrayitem 参数

提供

you li 的编号为 1...9（即使您只有 8 个 url，但这没关系）...在这种情况下，数组中的索引从 0...7 开始（8 项）-因此为什么 (index + 1)

Answer 2

数组是从0开始的，不是从1开始的，所以当你初始化x=1时，你只是从"musicArray"中的第2项开始访问。您的 "x" 永远不会改变并且始终保持为 1，您需要在每次迭代后递增它。快速修复将是：

function addDuration(array) {

  $.each(array, function(x,item) {
    var audio = new Audio();
    audio.src = item;
    $(audio).on("loadedmetadata", function() { //front
      $("li#row" + (x+1)).html(audio.duration);
    });
  });

为什么这个循环会改变每一轮的所有值

Why is this loop changing all values in each round

javascript

audio

jquery

loops

html5-audio