如何在javascript中使用class而不是id
Posted
技术标签:
【中文标题】如何在javascript中使用class而不是id【英文标题】：How to use class insted of id in javascript 【发布时间】：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>
【问题讨论】：
查询类无法实现您要的解决方案，您更感兴趣的是上下文以及作用于（点击）的元素。 【参考方案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';
;
在显示当前元素之前，您很可能需要遍历所有元素并隐藏它们。
祝你好运。
【讨论】：
以上是关于如何在javascript中使用class而不是id的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Typescript 而不是 Javascript 在解析服务器中编写云代码？
如何激活已经运行过的Activity, 而不是重新启动新的Activity
如何使用 google.load 加载 javascript 文件，而不是直接使用 freemarker 模板语言中的标签？