javascript - jQuery - 如何在循环中根据用户选择创建元素？

Question

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

问题是这 2 个循环使用单个 div 元素来调用函数(一次 5 个音频播放器):

对于音频:

/* 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>
<div id="audio-players2"></div>
<div id="audio-players3"></div>
<div id="audio-players4"></div>
<div id="audio-players5"></div>

我尝试对两个循环执行此操作:

替换这个:

$("#audio-players")

这样:

$("#audio-players" + f)

但是按钮将不起作用。

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

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

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

Answer 1

通过使用 files.forEach(...) 在单个循环中执行以下操作，生活将变得更加简单(或 jQuery 等效项):

• 创建<audio>元素
• 创建相应的<div>元素
• 附加播放按钮的 .on('click' ...)事件处理程序

此方法将导致循环内所做的任何分配对事件处理程序仍然可用。这是 javascript(和其他一些语言)的一个特性，称为“闭包”。

/* createAudio
 * create audio elements and corresponding div elements in a single loop */
function createAudio() {
    files.forEach(function(fileName) {
        var $audio = $('<audio class="audio" preload="true"><source src="http://www.alexkatz.me/codepen/music/' + fileName + '"></audio>');
        var $player = $('<div class="audioplayer"><button class="play playbutton"></button><div class="timeline"><div class="playhead"></div></div></div>')

        $("#audio-players").append($audio).append($player);

        $player.find(".playbutton").on('click', function() {
            $audio.play(); // "closure" causes the variable `$audio` still to exist when the button is clicked, even though createAudio() and the iterator function have both completed and returned.
        });
        // Attach any further event handlers here (eg "stop", "pause")
    });
}

请注意，元素具有唯一 ID 的需求消失了 - 除非它们出于其他目的而需要，尽管这种需求很可能完全消失。