当一个视频被选中时隐藏所有视频

Hide all video divs when one is selected

本文关键字：视频 隐藏所 一个      更新时间：2023-09-26

我是一个Javascript新手，很难找出这个函数的正确代码。

我有多个div。每个div有2个子div，当点击交换

例如，第一个div是带有滚动效果的样式图像。当图像被点击时，它与<video>交换。

然而，我正试图添加一些功能到这个…如果我点击另一个图像来播放<video>，我希望其他video s停止并交换回原始图像div s。

下面是我要测试的代码。

function SwapDivsWithClick(div1, div2) {
  d1 = document.getElementById(div1);
  d2 = document.getElementById(div2);
  if (d2.style.display == "none") {
    d1.style.display = "none";
    d2.style.display = "block";
  } else {
    d1.style.display = "block";
    d2.style.display = "none";
  }
}
<div id="project1Img" class="showDiv" style="display:block; border:2px dashed red; padding:25px;">
  <p style="margin:0; color:red;">
    <a href="javascript:SwapDivsWithClick('project1Img','project1Vid')">Img1</a>
  </p>
</div>
<div id="project1Vid" class="hideDiv" style="display:none; border:2px dotted blue; padding:25px;">
  <video>video content</video>
</div>
<div id="project2Img" class="showDiv" style="display:block; border:2px dashed red; padding:25px;">
  <p style="margin:0; color:red;">
    <a href="javascript:SwapDivsWithClick('project2Img','project2Vid')">Img2</a>
  </p>
</div>
<div id="project2Vid" class="hideDiv" style="display:none; border:2px dotted blue; padding:25px;">
  <video>video content</video>
</div>
<div id="project3Img" class="showDiv" style="display:block; border:2px dashed red; padding:25px;">
  <p style="margin:0; color:red;">
    <a href="javascript:SwapDivsWithClick('project3Img','project3Vid')">Img3</a>
  </p>
</div>
<div id="project3Vid" class="hideDiv" style="display:none; border:2px dotted blue; padding:25px;">
  <video>video content</video>
</div>

我想解决的问题是，当你点击第二个链接，然后其他两个恢复到原来的div1。

您是否愿意使用jQuery或其他DOM操作库?如果文件的重量不是问题，您可以编写一些东西来相对容易地解决这个问题。在任何情况下，如果你使用原生JS，你可能想把精力集中在遍历DOM元素的能力上。

这是一个简单的jQuery版本

$('.toggler').on('click', function(e) {
  e.preventDefault();
  var thisProjectVideo = $(this).parents('.projectImg').siblings('.projectVid');
  var thisProjectImg = $(this).parents('.projectImg');
  var allProjectVids = $('.projectVid');
  var allprojectImgs = $('.projectImg');
  allprojectImgs.removeClass('displayNone');  
  thisProjectImg.addClass('displayNone');
  allProjectVids.addClass('displayNone');
  thisProjectVideo.removeClass('displayNone');
})
.displayNone {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="videoContainer">
  <div id="project1Img" class="projectImg showDiv" style="border:2px dashed red; padding:25px;">
    <p style="margin:0; color:red;">
      <a class="toggler">Img1</a>
    </p>
  </div>
  <div id="project1Vid" class="projectVid hideDiv displayNone" style="border:2px dotted blue; padding:25px;">
    <video>video content</video>
  </div>
</div>
<div class="videoContainer">
  <div id="project2Img" class="projectImg showDiv" style="border:2px dashed red; padding:25px;">
    <p style="margin:0; color:red;">
      <a class="toggler">Img2</a>
    </p>
  </div>
  <div id="project2Vid" class="projectVid hideDiv displayNone" style="border:2px dotted blue; padding:25px;">
    <video>video content</video>
  </div>
</div>
<div class="videoContainer">
  <div id="project3Img" class="projectImg showDiv" style="border:2px dashed red; padding:25px;">
    <p style="margin:0; color:red;">
      <a class="toggler">Img3</a>
    </p>
  </div>
  <div id="project3Vid" class="projectVid hideDiv displayNone" style="border:2px dotted blue; padding:25px;">
    <video>video content</video>
  </div>
</div>

如何使用document.getElementsByClassName('showDiv')并循环它们(如果元素id与div1参数匹配，则跳到循环的下一次迭代)，并在所有它们上设置style.display='block'。这将显示除了id为div1的图像之外的所有图像。

然后使用document.getElementsByClassName('hideDiv')并循环它们(同样，如果元素id匹配div2，则跳转到下一个)，并设置style.display='none'。这将隐藏除了div2的id以外的所有视频。

这将重置列表中所有的div(不管有多少)到他们的默认状态，然后你可以隐藏div1和显示div2，你就完成了。

这个替换函数会做你想做的事情:

function SwapDivsWithClick(div1, div2) {
  var d = document.getElementsByClassName('showDiv');
  for (i = 0; i < d.length; ++i) {
    d[i].style.display = (d[i].id == div1) ? 'none' : 'block';
  }
  d = document.getElementsByClassName('hideDiv');
  for (i = 0; i < d.length; ++i) {
    d[i].style.display = (d[i].id == div2) ? 'block' : 'none';
  }
}
相关文章：