show hide div от имени класса чистый javascript

Я работаю над видеопроигрывателем, который запускает видео в iframe в оверлее div. Я хочу избежать повторного кода, такого как onclick =() в каждой ссылке, и хочу избегать внешних библиотек, таких как jQuery, потому что jQuery создает неприятный мерцающий экран при запуске моего видеоокна.show hide div от имени класса чистый javascript

Моя проблема заключается в том, что с моей работой до сих пор только первая ссылка открывает видеоизображение. Я (несколько) понимаю, что [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>

источник

2017-02-08 Cameron Vine

Вы можете перебирать элемент с помощью 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/

источник

2017-02-08 21:50:46

Спасибо всем за попытки помочь мне понять. Особенно спасибо Мохду за рабочий пример –

Вы на правильном пути. Вы хотите внести несколько незначительных изменений в свой 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); 
    }

путем повторения всех ваших открывающих или закрывающих устройств вы можете добавить слушателя к каждому из них.

источник

2017-02-08 21:48:31 SeanKelleyx

Что вы проблема заключается в том, что вам придется добавить вам слушатель событий для всех элементов этого типа, так что-то подобное будет работать:

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

и то же теоретиче более близкие элементы.

Что я здесь делаю, я получаю все элементы с именем класса openbutton, а затем перебираю их через цикл. Затем я применяю прослушиватель событий щелчка, в котором запускается функция openNav.

источник

2017-02-08 21:48:37 andrew196

show hide div от имени класса чистый javascript

ответ

Смежные вопросы