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

Why is this loop changing all values in each round

本文关键字：一轮 循环 改变 为什么      更新时间：2023-09-26

>我正在尝试创建一个函数来获取音频文件的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]

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

知道如何制作吗？

只需稍

作重新排列，您的代码就可以做您想做的事

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参数提供的

你

李的编号是 1...9(即使你只有 8 个 URL，但这没关系(......在这种情况下，数组中的索引从 0...7 开始(8 个项目( - 因此为什么 (索引 + 1(

数组

从 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);
    });
  });
相关文章：