如何在javascript中使用id替代的类_Javascript_Jquery_Html_Audio

如何在javascript中使用id替代的类

javascript jquery html audio

如何在javascript中使用id替代的类,javascript,jquery,html,audio,Javascript,Jquery,Html,Audio,我想在下面的脚本中使用class而不是id。。。。我想要一个mp3列表，每个都有相应的按钮，但当我点击任何播放按钮时，它会播放第一个mp3 <!DOCTYPE html> <html> <body> <button onclick="playVid()" type="button">Play</button> <audio controls id="video1" style

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


玩
var myVideo=document.getElementById（“video1”）；
函数playVid（）{
myVideo.play（）；
var obj=document.getElementById（“video1”）；
如果（obj）{
object.style.display='block'；
} 
}

您可以使用而不是

文档。getElementById（）

：

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

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

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

祝你好运。

你好，谢谢！请回答。。。。。我想在每个mp3中添加一个mp3和播放按钮列表，它仍然播放第一个mp3。请仅提供任何帮助。您寻找的解决方案无法通过查询类来实现，您更感兴趣的是上下文和操作（单击）的元素。

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