Fatal编程技术网
  • javascript/
  • 从类名纯javascript显示隐藏div

从类名纯javascript显示隐藏div

javascript arrays

从类名纯javascript显示隐藏div,javascript,arrays,show,Javascript,Arrays,Show,我正在开发一款视频播放器，它可以将视频启动到div覆盖中的iframe中。我希望在每个链接中避免重复的代码，如onclick=（），并希望避免外部库，如jQuery，因为在启动视频窗口时，jQuery会产生令人不快的闪烁屏幕 我的问题是，到目前为止，只有第一个链接打开了视频覆盖。我（多少）理解[0]表示数组中的第一个元素。数组是否可以包含无限的数值范围，或者是否有更好的方法来实现我的目标？这些库中可能会有数千个视频，因此在我的脚本中一次列出一个视频是不现实的 我仍在努力学习，因此请举一个工作示例

我正在开发一款视频播放器，它可以将视频启动到div覆盖中的iframe中。我希望在每个链接中避免重复的代码，如onclick=（），并希望避免外部库，如jQuery，因为在启动视频窗口时，jQuery会产生令人不快的闪烁屏幕

我的问题是，到目前为止，只有第一个链接打开了视频覆盖。我（多少）理解[0]表示数组中的第一个元素。数组是否可以包含无限的数值范围，或者是否有更好的方法来实现我的目标？这些库中可能会有数千个视频，因此在我的脚本中一次列出一个视频是不现实的

我仍在努力学习，因此请举一个工作示例。谢谢

我目前的工作

示例代码

<!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">&times;</button>
<div class="vidContent">vidplayer content</div>
</div>
<button class="openbtn">&#9776;</button>
<button class="openbtn">&#9776;</button>
<button class="openbtn">&#9776;</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>


视频叠加
身体{
保证金：0；
字体系列：arial；
}
#视频播放器{
身高：100%；
宽度：100%；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#000；
溢出：隐藏；
过渡：0.5s；
显示：无；
颜色：白色；
}
.关闭{
位置：绝对位置；
顶部：7px；
右：7px；
字体大小：50px；
}
.openbtn{
字体大小：30px；
}
.openbtn、.closebtn{
最大高度：48px；
最大宽度：48px；
最小高度：48px；
最小宽度：48px；
边界半径：7px；
线高：12px；
}
.视频内容{
宽度：100%；
文本对齐：居中；
字体大小：32px；
}
&时代；
视频播放器内容
☰
☰
☰
函数openNav（）{
document.getElementById（“vidPlayer”）.style.display=“block”；
}
函数closeNav（）{
document.getElementById（“vidPlayer”）.style.display=“无”；
}
var opener=document.getElementsByClassName（'openbtn'）[0]；
opener.addEventListener（“单击”，函数（e）{
openNav（）；
}，假）；
var closer=document.getElementsByClassName（'closebtn'）[0]；
closer.addEventListener（“单击”，函数（e）{
closeNav（）；
}，假）；
您走在正确的轨道上。您希望对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);
    }

var openers=document.getElementsByClassName（'openbtn'）；

对于（var i=0；i而言，您的问题是您必须将事件侦听器添加到该类型的所有元素中，这样类似的操作才能正常工作：


var opener=document.queryselectoral（'.openbtn'）；
数组.from（opener.foreach）（函数（opener\u single）{
opener_single.addEventListener（“单击”，openNav，false）；
})；

对于更紧密的元素，同样的理论


我在这里做的是获取所有元素的类名为
openbutton
，然后在循环中遍历它们，然后应用click事件监听器，在其中运行
openNav
函数。
您可以使用类名迭代元素并分配事件监听器


for(var i=0;i<document.getElementsByClassName("openbtn").length;i++){
    document.getElementsByClassName("openbtn")[i].addEventListener("click", function(e) {
        openNav();
    }, false);
    }



for（var i=0；感谢大家帮助我理解。特别感谢Mohd提供的工作示例