Question

我正在制作视频播放器，将视频发布到div叠加层中的iframe中。我希望在每个链接中避免使用重复代码，例如onclick =（），并且希望避免使用jQuery之类的外部库，因为当我的视频窗口启动时，jQuery会产生令人不快的闪烁屏幕。

我的问题是，到目前为止，我的工作只有第一个链接会打开视频叠加层。我（有点）理解[0]表示数组中的第一个元素。数组可以包含无限的数值范围，还是有更好的方法来实现我的目标？这些画廊中可能会有数千个视频，因此在我的剧本中一次列出一个视频是不切实际的。

我仍然在努力学习，所以非常感谢一个工作的例子。感谢

到目前为止我的工作

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">&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>

Answer 1

你走在正确的轨道上。你想对你的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);
    }

通过迭代所有的开启者或闭包者，你可以为每个人添加听众。

Answer 2

你遇到的问题是，你必须将事件监听器添加到该类型的所有元素中，这样这样的事情就可以了：

var opener = document.querySelectorAll('.openbtn'); Array.from(opener).foreach(function(opener_single){ opener_single.addEventListener("click", openNav, false); });

然后是更接近元素的相同理论。

我在这里做的是我正在获取类名为openbutton的所有元素然后在循环中循环遍历我然后应用运行openNav的click事件侦听器功能

Answer 3

您可以使用ClassName迭代元素并分配事件侦听器。

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

演示：https://jsfiddle.net/tj23hy3h/

show hide div from class name pure javascript

3 个答案: