divオーバーレイ内のiframeに動画を開始する動画プレーヤーで作業しています。私はすべてのリンクでonclick =()のような繰り返しコードを避け、jQueryのような外部ライブラリを避けたいのですが、私のビデオウィンドウが起動したときにjQueryが不快なちらつき画面を生成するからです。show div fromクラス名pure javascript
私の問題は、これまでの作業では、最初のリンクだけがビデオオーバーレイを開くことです。私は(幾分)[0]は配列の最初の要素を示していることを理解しています。配列に無限の数値範囲を含めることができますか、ここで私の目標を達成する良い方法がありますか?これらのギャラリーには何千ものビデオが潜在的に存在しますので、スクリプトに一度に1つずつリストすることは現実的ではありません。
私はまだ勉強に苦しんでいますので、実際の例は非常に高く評価されます。おかげ
私の仕事、これまで
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>
感謝。特に実例のMohdのおかげです。 –