Question

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

问题是这两个循环使用单个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（和其他一些语言）的一个功能，称为＆＃34; closure＆＃34;。

/* 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的需求会消失 - 除非它们当然需要用于其他目的，尽管它很可能完全消失。

Answer 2

首先尝试： https://codepen.io/wolfram77/pen/POOqmv

如果您只想显示一首歌曲中的一位播放器：

function showPlayer(f) {
  for(var i=0; i<files.length; i++) {
    if(i===f) $("#audioplayer-"+i).show();
    else $("#audioplayer-"+i).hide();
  }
};

现在，让我们创建一个选择，我们可以选择哪一个：

<select id="select-songs"></select>

然后，创建选择和处理选项＆＃34;更改＆＃34;事件：

/* createSelectOptions
 * create select options for each file in files */
function createSelectOptions() {
    for (f in files) {
        var optionString = `<option value="${f}">${files[f]}</option>`;
        $("#select-songs").append(optionString);
    }
  $("#select-songs").on('change', function(el) {
    var f = parseInt($("#select-songs option:selected").val());
    console.log(f, files[f]);
    showPlayer(f);
  });
  showPlayer(0);
}

最后，别忘了执行它：

/* theDOMHasLoaded()
 * Execute when DOM is loaded */
function theDOMHasLoaded(e) {
    // Generate HTML for audio elements and audio players
    createAudioElements();
    createAudioPlayers();

    // Populate Audio List
    populateAudioList();
    populateComponentDictionary();
    createSelectOptions();
}

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

2 个答案: