jQuery-如何在循環中基於用戶選擇創建元素？

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（和其他一些語言）稱為“關閉”的功能。

/* 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>

並且，創建用於選擇和處理“更改”事件的選項：

/* 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();
}