javascript - 循环 JavaScript

Question

我一直在搜索 Stackoverflow 和 Google，并尝试了所有我能想到的方法来弄清楚如何使用 javascript 循环访问 html 文件并找到所有视频文件及其唯一 ID，但我似乎无法理解正确的。我已经好几年没有编码了，所以我很生疏，我的大部分经验都是后端代码。我对 DOM 和 Javascipt 的经验很少，我确信无论我尝试过什么，我都可能搞砸了语法/语义。

代码的作用:

Javascript 使视频弹出并在模态窗口中播放，但是由于它是硬编码的，我只能输入一个唯一的 ID，当您单击网页上的每个视频时，它们当然会播放同一个视频。

希望有人能提供帮助，这是我的游戏收藏的个人项目，我唯一需要完成的就是最后一段代码。在此先感谢您的帮助。

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>

Answer 1

就像 James 所说的那样，document.querySelectorAll('video') 会获取页面上的每个视频标签，但是如果我对你的问题理解正确的话，你想找到一个特定的 ID 并在什么时候播放它被选中了。循环播放可能是一种低效的方法，尤其是当您有很多视频时。

也许您可以尝试在您的 onclick 中放置一个变量，例如 onclick="lightbox_open('1')"，然后您可以在该函数中执行以下操作:

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

然后，如果您要从后端构建更多可能的视频，您可以在设置每个元素的 onclick 属性时增加该变量。