show hide div vom Klassennamen pure javascript

Ich arbeite an einem Video-Player, der ein Video in einen iframe innerhalb eines div-Overlays startet. Ich möchte in jedem Link einen repetitiven Code wie onclick =() vermeiden und externe Bibliotheken wie jQuery vermeiden, da jQuery beim Start meines Videofensters einen unangenehmen flackernden Bildschirm erzeugt.show hide div vom Klassennamen pure javascript

Mein Problem ist, dass mit meiner bisherigen Arbeit nur der erste Link das Video-Overlay öffnet. Ich verstehe (etwas), dass [0] das erste Element in einem Array anzeigt. Kann ein Array einen unendlichen Zahlenbereich enthalten, oder gibt es hier einen besseren Weg, mein Ziel zu erreichen? Es wird möglicherweise Tausende von Videos in diesen Galerien geben, daher ist es nicht praktisch, sie in meinem Skript einzeln aufzulisten.

Ich kämpfe immer noch zu lernen, so würde ein Arbeitsbeispiel sehr geschätzt werden. Dank

Meine Arbeit so weit

https://jsfiddle.net/4oomb9rt/

Beispielcode

<!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>

Quelle

2017-02-08 Cameron Vine

Sie können über Element mit ClassName iterieren und Ereignis-Listener zuweisen.

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

Demo: https://jsfiddle.net/tj23hy3h/

Quelle

2017-02-08 21:50:46

Vielen Dank an alle für die Versuche, mir zu helfen, zu verstehen. Besonders dank Mohd für das Arbeitsbeispiel –

Sie auf dem richtigen Weg sind. Sie möchten ein paar kleinere Änderungen an Ihrem Javascript vornehmen.

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); 
    }

durch durch alle Ihre Öffner oder Schließer Iterieren können Sie den Hörer in jedem hinzuzufügen.

Quelle

2017-02-08 21:48:31 SeanKelleyx

Was Problem, das Sie ist, dass Sie Sie Ereignis-Listener der Elemente dieses Typs alle hinzufügen müssen werde so etwas wie dies funktionieren würde:

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

und dann die gleiche Theorie für die näheren Elemente.

, was ich hier mache ist, dass ich immer alle Elemente mit dem Klassennamen von openbutton dann in der Schleife durch sie Looping dann bin ich das Click-Ereignis-Listener Anwendung, in denen läuft die openNav Funktion.

Quelle

2017-02-08 21:48:37 andrew196

show hide div vom Klassennamen pure javascript

Antwort

Verwandte Themen