은 자바 스크립트 배열의 다른 부분을 표시해야합니다.

Question

안녕하세요 저는 자바 스크립트를 통해 웹 사이트에서 노래를 재생할 음악 플레이어를 만들려고합니다.

나는 음악을 꺼내기 위해 배열을 잘라내려고 할 때 문제가 있습니다.

VAR 파일 = [ "ROC-boys.mp3", // - 제이 Z "dirt.mp3", // - 제이 Z "99.mp3", // - 제이 Z "기분-을 .mp3 ", // - Jay Z ];

그래서 배열 배치 방법입니다.

function createAudioElements() { 
    files = files.slice(5,9); 
    for (f in files) { 
     var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"audio/" + files[f] + "\"></audio>"; 



function createAudioElements() { 
      files = files.slice(5,9); 
      for (f in files) { 
      var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"audio/" + files[f] + "\"></audio>"; 

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

    } 
} 


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

이것은 노래가 HTML로로드되는 방식입니다. 문제는 1 개 이상의 div에서 작동하지 않습니다.

의견이 있으십니까 ??

누구나 쉽게 이해할 수있는 더 쉬운 해결책을 알고 있다면.

Answer 1

두 가지 주요 문제점이 있습니다. 말했듯이 id를 사용하면 첫 번째 요소에서만 작동합니다. files 전역을 재정의하는 또 다른 중요한 문제는 slice 기능을 사용합니다. 즉, 처음으로 createAudioElments을 호출하면 files 배열이 5 번째에서 9 번째 요소로 새 배열로 업데이트되고 동일한 또는 createAudioPlayers 함수를 호출하면 files 변수에 빈 배열이 할당됩니다. 아래의 작업 예제를보고 다른 질문이 있으면 알려주십시오.

var files = new Array(9).fill(1); 
 

 
function createAudioElements() { 
 
    for (f in files.slice(5,9)) { 
 
      var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"audio/" + files[f] + "\"></audio>"; 
 

 
     $(".audio-players").append(audioString); 
 

 
    } 
 
} 
 

 

 
function createAudioPlayers() { 
 
    for (f in files.slice(5,9)) { 
 
     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); 
 
    } 
 
} 
 

 
createAudioPlayers(); 
 
createAudioElements();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="audio-players"> 
 
    <span>First player</span> 
 
</div> 
 
<div class="audio-players"> 
 
    <span>Second player</span> 
 
</div>