Question

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

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

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

但是，我正在尝试为此添加一些功能...如果我点击另一个图像来播放<video>，我希望其他video停止并交换回原始图片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。

Answer 1

如何使用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';
  }
}

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>

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

2 个答案: