JavaScript播放列表目标元素

我正在使用带有播放列表的JavaScript驱动的音频播放器。当我尝试向我想播放的元素添加点击事件时遇到问题。JavaScript播放列表目标元素

显然我在循环中做错了什么，因为元素被显示，但没有播放。控制台中没有错误。

//object 
obj = { 
    songsrc: ["mariah_carey_all_i_want", "chris_rea_driving", "wham_last_christmas", "dean_martin_snow", "brenda_lee_rocking"], 
    title: ["Mariah Carey", "Chris Rea", "Wham", "Dean Martin", "Brenda Lee"], 
    songs: ["All I want for christmas is you", "Driving home for christmas", "Last christmas", "Let it snow", "Rocking around"], 
    images: ["mariah_carey", "wham", "chris_rea", "dean_martin", "brenda_lee"] 
} 

// the <ul> in which the li elements I have lay 
mylist.addEventListener("click", changeTrack); 

// adding the songs to the playlist 
addTrack(); 
function addTrack() { 
    for(var i = obj.title.length-1; i >= 0; i--) { 
     li = document.createElement("li"); 
     li.className = "songs_wrap"; 
     li.innerHTML = "<div class='songs_inner'>" + "<h4>"+obj.title[i]+ "</h4><p>" + obj.songs[i] + "</p></div>"; 
     mylist.appendChild(li); 
    } 
} 

// trying to make them play when I click a song (a li element) 
function changeTrack(event) { 
    var target = event.target; 
    while (target != mylist) { 
     if (target.nodeName == 'LI') 
     { 
      for(var i = target; i < obj.songsrc.length; i++) // I guess this is wrong 
      { 
       obj.images.src = "images/" + obj.images[i] + ".jpg"; 
       var title = playlist_status.innerHTML = obj.title[i]; 
       var song = playlist_song.innerHTML = obj.songs[i]; 
       audio.src = dir + obj.songsrc[i] + ext; 
       playbtn_icon.className = "icon-pause"; 
       audio.play(); 
      } 
     } 
     target = target.parentNode 
    } 
}

来源

2014-12-04 SimeriaIonut

不知道我知道你想与实现for循环的东西。但正如我所看到的那样，问题在于你永远不会进入for循环。如果我正确地提示你正在尝试获取目标元素的索引，并用它来做一些事情？

因此，通过这个假设你可以使用jQuery并获得你单击的元素的索引。

var i = $(target).index();

然后跳过循环。我不能真正在jsfiddle中测试这个，因为我得到像“playlist_status”这样的错误是未定义的。

来源

2014-12-04 11:34:29 PNS

这解决了我的问题，谢谢！的确，我并不需要循环，jquery为我做了这项工作。 – SimeriaIonut 2014-12-04 12:21:27

JavaScript播放列表目标元素

回答

相关问题