子元素上的JavaScript目标数据

我正在开发一个基于JavaScript的音频播放器。我正在尝试为音频播放器制作一个播放列表，我成功地使用了“选择和选项”（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>

现在，当我单击li时，歌曲应更改为audio/other_song.mp3，但它没有。我相信我做错了的是瞄准了来自李的“数据”

---

有人知道吗？

这是您在案例中处理歌曲选择的方式。请注意，您必须收听

onclick

event并正确选择事件目标：

//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

方法来读取属性

数据

，因为不存在

数据

这样的属性

---

演示：列表上没有

change

事件。你能发布完整的HTML吗？我的意思是

li

里面没有任何东西吗？当我点击li时，歌曲应该会改变。代码处理中没有任何内容

单击事件
。哦，好的。因此，我不应该使用“更改”，而应该使用“单击”@simeriaout:从处理单击开始
li
。然后继续在
ul
上使用事件委派。这对我很有用。现在我甚至明白了为什么它以前不起作用了，非常感谢你的解释。
//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
    }
}