选择一个时隐藏所有视频div

Question

我是Java语言的新手，因此很难为此功能找出正确的代码。

我有多个div 。 每个div有2个子div ，在单击时会互换。

例如，第一个div是具有翻转效果的样式化图像。 单击图像后，它会与<video>交换。

但是，我正在尝试为此添加一些功能...如果单击其他图像以播放<video> ，我希望其他video停止并交换回原始图像div 。

这是我正在测试的代码。

 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 。

Answer 1

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

然后使用document.getElementsByClassName('hideDiv')并遍历它们（再次，如果元素ID匹配div2 ，则style.display='none'下一个），并设置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';
  }
}

Answer 2

您愿意使用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>