显示隐藏div from class name纯javascript
我正在开发一个视频播放器，它可以将视频放入div覆盖的iframe中。我希望避免在每个链接中使用重复的代码(如onclick=() )，也希望避免使用外部库(如jQuery )，因为在启动视频窗口时，jQuery会产生令人不快的闪烁屏幕。
我的问题是，到目前为止，在我的工作中，只有第一个链接打开了视频覆盖。我(有些)理解表示数组中的第一个元素。一个数组可以包含无限的数值范围吗，或者有没有更好的方法来实现我的目标？这些库中可能会有数千个视频，因此在我的脚本中逐个列出它们是不切实际的。
我还在努力学习，所以我会非常感谢一个工作的例子。谢谢
我到目前为止的工作
https://jsfiddle.net/4oomb9rt/
示例代码
<!doctype html>
<html>
<head>
<title>Video Overlay</title>
<style>
body {
margin: 0;
font-family: arial;
}
#vidPlayer {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000;
overflow: hidden;
transition: 0.5s;
display: none;
color: white;
}
.closebtn {
position: absolute;
top: 7px;
right: 7px;
font-size: 50px;
}
.openbtn {
font-size: 30px;
}
.openbtn, .closebtn {
max-height: 48px;
max-width: 48px;
min-height: 48px;
min-width: 48px;
border-radius: 7px;
line-height: 12px;
}
.vidContent {
width: 100%;
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<div id="vidPlayer">
<button class="closebtn">×</button>
<div class="vidContent">vidplayer content</div>
</div>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<script>
function openNav() {
document.getElementById("vidPlayer").style.display = "block";
}
function closeNav() {
document.getElementById("vidPlayer").style.display = "none";
}
var opener = document.getElementsByClassName('openbtn')[0];
opener.addEventListener("click", function(e) {
openNav();
}, false);
var closer = document.getElementsByClassName('closebtn')[0];
closer.addEventListener("click", function(e) {
closeNav();
}, false);
</script>
</body>
</html>回答 3
Stack Overflow用户
发布于 2017-02-09 05:50:46
您可以使用ClassName遍历元素并分配事件侦听器。
for(var i=0;i<document.getElementsByClassName("openbtn").length;i++){
document.getElementsByClassName("openbtn")[i].addEventListener("click", function(e) {
openNav();
}, false);
}Stack Overflow用户
发布于 2017-02-09 05:48:31
你在正确的轨道上。你想对你的javascript做一些小的修改。
var openers = document.getElementsByClassName('openbtn');
for(var i=0; i<openers.length; i++) {
openers[i].addEventListener("click", function(e) {
openNav();
}, false);
}
var closers = document.getElementsByClassName('closebtn');
for(var i=0; i<closers.length; i++) {
closers[i].addEventListener("click", function(e) {
closeNav();
}, false);
}通过遍历所有的开场白或闭幕场，您可以将监听器添加到每个开场白或闭幕场。
Stack Overflow用户
发布于 2017-02-09 05:48:37
您的问题是，您必须将您的事件侦听器添加到该类型的所有元素中，这样才能正常工作：
var opener = document.querySelectorAll('.openbtn'); Array.from(opener).foreach(function(opener_single){ opener_single.addEventListener("click", openNav, false); });
更接近的元素也有同样的理论。
我在这里做的是获取类名为openbutton的所有元素，然后在循环中循环它们，然后应用单击事件侦听器，在其中运行openNav函数。
https://stackoverflow.com/questions/42124196
复制相似问题
腾讯云开发者
