Question

我正在尝试使用以下代码创建5个不同的音频播放器，以便在HTML文档中的任何位置单独调出它们：https://codepen.io/katzkode/pen/ZbxYYG

问题是这2个循环使用单个div元素来调用函数：

对于音频：

/* createAudioElements
 * create audio elements for each file in files */
function createAudioElements() {
    for (f in files) {
        var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"http://www.alexkatz.me/codepen/music/" + files[f] + "\"></audio>";
        $("#audio-players").append(audioString);
    }
}

对于div元素：

/* createAudioPlayers
 * create audio players for each file in files */
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);
    }
}

但是我要做的是创建 5个不同的元素来单独搔痒它们并在我需要的任何地方调用它们在网站上使用div id =“audio-players1”，div id =“audio-players2”等。

我已经尝试为两个循环执行此操作：

而不是

$("#audio-players")

添加：

$("#audio-players" + f)

但是按钮不起作用。

以下是从中提取文件的代码：

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

我不确定如何继续，我还在学习。 谢谢。

Answer 1

这是您正在寻找的CODEPEN。

与您的代码相比的变化：

重新订购div和音频创作：

createAudioPlayers();  
createAudioElements();

当你需要像＃audio-players2这样的东西时，只需稍微调整一下这段代码：

for (f in files) {
    var playerString = "<div id=\"audio-players-" + 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>";
    $("body").append(playerString);
}

在函数createAudioElements()中，根据音频播放器（DIV）ID附加音频：
```
$("#audio-players-"+f).append(audioString);
```

修改

新CODEPEN。我想我在这里找出了问题。因此，当您尝试单独添加播放器时，按钮在创建时随时添加时不会起作用但，一切正常，对吧？

所以事情就是这样：bindAudioPlayer在向DOM以及timeline和其他元素分别添加播放器时找不到正确的元素。

在新的codepen中，我添加了一个带有select选项的按钮，当选中该选项时，会将特定的玩家（基于该值）添加到DOM。检查onClick代码：

$('a.add_player').click(function() { var val = $(this).parent().find('select.player_num').val(); if(!$('body div#audio-players'+val).length) { var playerString = "<div id=\"audio-players" + val + "\" class=\"audioplayer\"><button id=\"playbutton-" + val + "\" class=\"play playbutton\"></button><div id=\"timeline-" + val + "\" class=\"timeline\"><div id=\"playhead-" + val + "\" class=\"playhead\"></div></div><audio id=\"audio-" + val + "\" class=\"audio\" preload=\"true\"><source src=\"http://www.alexkatz.me/codepen/music/" + files[val-1] + "\"></audio></div>"; $("body").append(playerString); // Populate Audio List populateAudioList(val); populateComponentDictionary(val); } });

如果你还可以检查populateAudioList函数，其中循环被删除，传递的值用于选择DOM元素，因此事件被绑定到选择器。

如果这是所需的输出，请告诉我。希望这可以帮助。：）

修改2

CODEPEN

我添加了一个名为createAudioPlayersSeparately()的函数，我认为它符合要求。

如果您注意到，我已经为播放器3和播放器4交换了文件，即将文件4用于播放器3，将文件3用于播放器4.现在，这意味着，它应该很容易调用任何播放器音频＆＃34;无论在哪里＆＃34;你喜欢在页面上。请务必相应地致电populateAudioList()和populateComponentDictionary()。

希望这会有所帮助。：）

我正在尝试使用此循环创建5个不同的div元素

1 个答案: