子元素上的JavaScript目标数据

Question

我正在基于JavaScript的音频播放器上工作。 我正在尝试为音频播放器创建播放列表，但成功使用了select和option（html），但是无法为它们设置样式。 因此，我尝试了ul和li。

所以我有HTML标记：

<ul id="mylist">
    <li data="Another_Song" class="songs_wrap">
        <div class="songs_inner">
            <h4>Song #1</h4>
            <p>Some song details</p>
        </div>
    </li>
</ul>

和JavaScript：

function initAudioPlayer() {
    var audio, dir, ext, mylist, mylist_li;

    ext = ".mp3";
    dir = "audio/";

    audio = new Audio();
    audio.src = dir+"My_Song"+ext;
    audio.loop = false;

    //Object ref
    mylist = document.getElementById("mylist");
    mylist_li = mylist.getElementsByTagName("li"); //targeting the li elements

    //Event handling
    mylist.addEventListener("change", changeTrack);
    mylist_li.addEventListener("click", doSomethingElse); //not sure about what it should do in corelation with the changetrack function i already have on the event.

    //Functions
    function changeTrack(event){
        audio.src = dir+event.target.data+ext;
        audio.play();
    }

}
window.addEventListener("load", initAudioPlayer);

现在，当我单击li时，歌曲应该更改为audio / Another_Song.mp3，但是没有。 我相信我做错了针对li的“数据”。

有人知道吗？

Answer 1

这是您应如何处理歌曲选择的方式。 请注意，您必须监听onclick事件并正确选择事件目标：

//Event handling
mylist.addEventListener("click", changeTrack);

//Functions
function changeTrack(event) {
    var target = event.target;
    while (target !== mylist) {
        if (target.nodeName == 'LI') {
            audio.src = dir + target.getAttribute('data') + ext;
            audio.play();
        }
        target = target.parentNode
    }
}

注意while循环。 意识到click事件最初会发生在某些嵌套元素（不是li ）上，这一点非常重要。 这意味着event.target将是H4或P元素，而不是您期望的LI 。 因此，您必须走到DOM树，直到找到最近的LI节点。

最后，应该使用getAttribute方法读取属性data ，因为没有诸如data这样的属性。

演示： http ： //jsfiddle.net/6fryqatq/