javascript - 如何将事件监听器附加到 html 元素数组并将数据属性解析为 javascript 中的参数？

Question

我正在用 Javascript 构建自定义音频播放器，但我无法将事件监听器附加到列表中的每首歌曲。当我点击播放列表中的轨道时，我想通过一个名为selectTrack(x) 的函数解析一个数据属性来告诉播放器播放哪首歌。但是，我不断收到一条错误消息，指出此函数未定义。

这是我遇到的问题:

// attach event listener and get data value from div 
var myListener = document.getElementsByClassName("trackListRow");
for (var i=0; i < myListener.length; i++)
{
  myListener[i].getAttribute("data-track-index");
  mylistener[i].addEventListener("click", function(){

    selectTrack(datavalue);

  });
}

完整代码贴在下面。

var trackListContainer, playPrevBtn, playPauseBtn, PlayNextBtn;
var trackRow, songArray;
songArray = ["Aminaiyoamoore", "adg3com_chuckedknuckles" ];

// create track list - append to container
var i;
for (i = 0; i < songArray.length; i++) {
    trackRow = document.createElement("div");
    trackRow.textContent = songArray[i];
    trackRow.className = "trackListRow";
    // set data attribute to array index number for event handling
    trackRow.setAttribute("data-track-index", songArray.indexOf(songArray[i]));

    trackListContainer = document.getElementById("trackListContainer");
    trackListContainer.appendChild(trackRow);
   
}  
           
       //  Problems here
// attach event listener and get data value from div 
var myListener = document.getElementsByClassName("trackListRow");
for (var i=0; i < myListener.length; i++)
{
  myListener[i].getAttribute("data-track-index");
  mylistener[i].addEventListener("click", function(){
    
    selectTrack(datavalue);
    
  });
}


  
var playPrevBtn, playPauseBtn, playNextBtn;
playPrevBtn = document.getElementById("playPrevBtn");
playPauseBtn = document.getElementById("playPauseBtn");
playNextBtn = document.getElementById("playNextBtn");

function initBeatPlayer() {
   // var dir = "audio/";
   var dir =  "http://www.puntlandtvradio.net/placeholders/audio/"
 
    var ext = ".mp3";
    playlist_array_index = 0;
    audio = new Audio();


    playPauseBtn.addEventListener("click", playPause);
    playPrevBtn.addEventListener("click", seekBackward);
    playNextBtn.addEventListener("click", seekForward);
    audio.addEventListener("ended", function() {
        switchTrack()
    });


    // functions 

  
  function selectTrack(datavalue){
    
    playlist_array_index = datavalue
    audio.src = dir + songArray[playlist_array_index] + ext;          
            audio.play();
  
  }
  
  
  
  
  
  
    function playPause() {
        if (audio.paused) {
            audio.play();
            document.getElementById("playPauseBtn").textContent = "PAUSE";
        } else {
            audio.pause()
            document.getElementById("playPauseBtn").textContent = "PLAY"
        }
    }


    function seekBackward() {
        if (playlist_array_index <= 0) {

            playlist_array_index = 0;
            audio.src = dir + songArray[playlist_array_index] + ext;
            audio.pause();
            audio.currentTime = 0;
            audio.play();
        } else {

            playlist_array_index--;
            audio.src = dir + songArray[playlist_array_index] + ext;
            audio.play();
        }
    }

    function seekForward() {

        if (playlist_array_index == (songArray.length - 1)) {
            playlist_array_index = 0;

        } else {

            playlist_array_index++;
            audio.src = dir + songArray[playlist_array_index] + ext;          
            audio.play();

        }

    }

    //end functions
}
window.addEventListener("load", initBeatPlayer);

#container{width: 320px; margin: auto; overflow: hidden;}
#controls {}
#playPrevBtn, #playPauseBtn, #playNextBtn{  font-size: 25px; margin: 5px;}
.trackListRow {font-size: 20px;  background-color: aliceblue; color: black;  padding: 10px;  margin: 5px;}
.trackListRow:hover {background: brown; color: white; }

<!--player control buttions -->
<div id="container">
  <div id="trackListContainer"> </div> 
 
  
  <div id="controls">
    <button id="playPrevBtn"> << </button>
    <button id="playPauseBtn">PAUSE</button>
    <button id="playNextBtn">>></button>

  </div>
    
   <div> music by puntlandtvradio.net - for educational purposes </div> 
</div>

Answer 1

一些事情:

1. for 循环中的第二行:mylistener 应该是 myListener(大写的 L)
2. 事件监听器中的数据值未定义，先声明。
3. 正如评论指出的那样，selectTrack 在 initBeatPlayer 中，因此不公开。但是，考虑到 selectTrack 还需要引用 initBeatPlayer 中的其他变量，最好将处理程序绑定(bind)工作移到 initBeatPlayer 中，如下所示好吧。

这是一个“有效”的 jsFiddle，您仍然需要清理该代码段旁边的其他部分: https://jsfiddle.net/bosjuLmo/1/