Question

我想在以下脚本中使用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>

Answer 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

Answer 2

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

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

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

祝你好运。

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

2 个答案: