如何在javascript中使用class而不是id答案

【问题标题】：How to use class insted of id in javascript如何在javascript中使用class而不是id
【发布时间】：2014-05-16 03:06:05
【问题描述】：

我想在下面的脚本中使用 class 而不是 id.... 我想要一个 mp3 列表，每个都有对应的按钮，但是当我点击任何播放按钮时，它会播放第一个 mp3。

<!DOCTYPE html>
<html>       
    <body>
        <button onclick="playVid()" type="button">Play</button>
        <audio controls id="video1" style="display: none;">
            <source src="http://localhost/astrorecords/wp-content/uploads/2014/05/280.mp3" type="audio/mp3">
        </audio>
        <script>
            var myVideo=document.getElementById("video1");
            function playVid() { 
                myVideo.play();
                var obj = document.getElementById("video1"); 
                if (obj) { 
                    obj.style.display='block'; 
                } 
             }
        </script>
    </body>
</html>

【问题讨论】：

查询类无法实现您要的解决方案，您更感兴趣的是上下文以及作用于（点击）的元素。

标签： javascript jquery html audio

【解决方案1】：

您可以使用 document.getElementsByClassName() 代替 document.getElementById()：

var myVideo = document.getElementsByClassName("video1")[0];

function playVid() {
    myVideo.play();
    var obj = document.getElementsByClassName("video1")[0];
    if (obj) {
        obj.style.display = 'block';
    }
}

Fiddle Demo

【讨论】：

您好，谢谢！回复.....我想为每个 mp3 添加一个 mp3 列表和播放按钮，它仍然播放第一个 mp3，请提供任何帮助

【解决方案2】：

您应该使用 on click 的事件对象和 target 属性（您刚刚单击的 DOM 元素）。示例：

function playVid(event) {
    var myVideo = event.target.nextSibling;
    myVideo.play();
    myVideo.style.display = 'block';
};

在显示当前元素之前，您很可能需要遍历所有元素并隐藏它们。

祝你好运。

【讨论】：