Цикл JavaScript - PullRequest
Новая
       9

Цикл JavaScript

0 голосов
/ 28 февраля 2019

Я искал в Stackoverflow и Google и перепробовал все, что мог, чтобы выяснить, как пройтись по html-файлу с помощью javascript и найти все видеофайлы и их уникальный идентификатор, но, похоже, я не могу его получитьправо.Я не программировал уже несколько лет, поэтому я очень ржавый, и большая часть моего опыта связана с внутренним кодом.У меня очень мало опыта работы с DOM и Javascipt, я уверен, что когда бы я ни пытался, я, наверное, облажался с синтаксисом / семантикой.

Что делает код:

Javascript заставляет видео всплывать и воспроизводиться в модальном окне, однако, поскольку оно жестко запрограммировано, я могу ввести только один уникальный идентификатор, и когда вы нажимаете на каждое из видео на веб-странице, они, конечно, воспроизводятто же видео.

Надеюсь, кто-то может помочь, это личный проект для моей коллекции игр, и единственное, что мне осталось сделать, - это последний кусок кода.Заранее благодарим за любую помощь. 

window.document.onkeydown = function(e) {
  if (!e) {
    e = event;
  }
  if (e.keyCode == 27) {
    lightbox_close();
  }
}

function lightbox_open() {
  var lightBoxVideo = document.getElementById("Some-ID-Variable");
  window.scrollTo(0, 0);
  document.getElementById('light').style.display = 'block';
  document.getElementById('fade').style.display = 'block';
  lightBoxVideo.play();
}

function lightbox_close() {
  var lightBoxVideo = document.getElementById("Some-ID-Variable");
  document.getElementById('light').style.display = 'none';
  document.getElementById('fade').style.display = 'none';
  lightBoxVideo.pause();
}
<!--Here is the HTML I have, I am only showing 2 game titles in the example, but this code repeats for every game in my collection:-->

<div class="containers">
  <!--Begin .container-->
  <div id="light">
    <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
    <video id="MyVideo" width="600" controls>
                <source src="videos/game-title-1-trailer.mp4" type="video/mp4">
            </video>
  </div>
  <div id="fade" onClick="lightbox_close();"></div>
  <div>
    <a href="#" onclick="lightbox_open();"><img class="title-image" src="images/placeholder.jpg" alt="Some Title"></a>
    <br>
    <a href="#" onclick="lightbox_open();"><span class="title-text">Game Title 1</span></a>
    <br>
    <ul>
      <li>Comfort: Intense</li>
      <li>Learning Curve: Intermediate</li>
    </ul>
    <br>
    <p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p>
    <br>
  </div>
</div>
<!--End .container-->

<div class="containers">
  <!--Begin .container-->
  <div id="light">
    <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
    <video id="MyVideo" width="600" controls>
                <source src="videos/game-title-trailer-2.mp4" type="video/mp4">
            </video>
  </div>
  <div id="fade" onClick="lightbox_close();"></div>
  <div>
    <a href="#" onclick="lightbox_open();"><img class="title-image" src="images/placeholder.jpg" alt="Some Title"></a>
    <br>
    <a href="#" onclick="lightbox_open();"><span class="title-text">Game Title 2</span></a>
    <br>
    <ul>
      <li>Comfort: Intense</li>
      <li>Learning Curve: Intermediate</li>
    </ul>
    <br>
    <p class="desc-text">The game decription goes here. The game decription goes here. The game decription goes here. The game decription goes here.</p>
    <br>
  </div>
</div>

1 Ответ

0 голосов
/ 28 февраля 2019

Как сказал Джеймс, document.querySelectorAll('video') получит каждый тег видео на странице, но если я правильно понимаю ваш вопрос, вы захотите найти конкретный идентификатор и воспроизвести его, когда он будет выбран.Зацикливание, вероятно, является неэффективным способом сделать это, особенно если у вас много видео.

Возможно, вы можете попробовать добавить переменную в свой клик, например, onclick="lightbox_open('1')", тогда в этой функции вы можете выполнить: 

function lightbox_open(idNum) {
  var lightBoxVideo = document.getElementById("Some-ID-Variable" + idNum);
  //...
}

Тогда, если вы создаете больше возможных видео из бэкэнда, вы можете просто увеличивать эту переменную, когда устанавливаете атрибут onclick каждого элемента.

...