javascript - 我正在尝试拆分此“for”循环以创建5个不同的DIV元素

谢谢你路过我真的是一个新手，我正在尝试（通过编写一些代码，希望那没什么问题）5个不同的玩家，并且我使用了以下代码：https://codepen.io/katzkode/pen/ZbxYYG

我正在尝试将以下循环分为5个不同的div（5个不同的播放器，而不是＃audio-players，每个播放器都有一个新的div）：

function createAudioPlayers() {
    for (f in files) {
        var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>";
        $("#audio-players").append(playerString);
    }
}

这是从中提取文件的代码：

var files = ["interlude.mp3", // 0
            "chooseyourweapon.mp3", // 1
            "interlude.mp3", // 2
            "scriptures.mp3",
       "scriptures.mp3"// 3
            ];

而且我不确定该如何进行，我仍在学习。谢谢。

最佳答案

似乎您只需要循环数组。使用forEach为便于理解

function createAudioPlayers() {
  files.forEach(function(f) {
    var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\">" + f + "</button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>";
    $("#audio-players").append(playerString);
  })
}


var files = ["interlude.mp3", // 0
  "chooseyourweapon.mp3", // 1
  "interlude.mp3", // 2
  "scriptures.mp3",
  "scriptures.mp3" // 3
];
createAudioPlayers()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="audio-players"></div>