jQuery - ループ内のユーザー選択に基づいて要素を作成するにはどうすればよいですか？私は、HTML文書でそれを必要な場所に個別にそれらを呼び出すために、次のコードから5人の異なるオーディオプレーヤーを作成しようとしている

Question

：https://codepen.io/katzkode/pen/ZbxYYG

問題は、これらの2つのループを呼び出すために、単一のdiv要素を使用することです機能（一度に5人のオーディオプレーヤー）：オーディオ用

：の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); 
    } 
} 

：

/* 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つではなく、特定の曲で同時に呼び出すことです。これにより

$("#audio-players") 

：

この交換：私は両方のループのためにこれを行うにしようとしました

<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" + f) 

しかし、このよう

ボタンは機能しません。

はこちらからファイルをプルするコードです：

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

そして私は、私はまだ学んでいる続行するかどうかはわかりませんよ。 ありがとうございます。

Answer 1

は、最初にこれを試してみてください： https://codepen.io/wolfram77/pen/POOqmv

ソングの1人のプレーヤのみ表示させたい場合は：

：

今

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

Answer 2

人生は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を持っていることに注意が消え - 彼らは他の目的のために必要とされているコースの場合を除き、それは必要性が完全に消える可能性が高いのですけれども。