javascript - 如何管理不同按钮点击时的多个叠加层？

Question

function toggleOverlay_1() {
  var overlay = document.getElementById('overlay');
  var specialBox = document.getElementById('specialBox_1');
  overlay.style.opacity = .8;
  if (overlay.style.display == "block") {
    overlay.style.display = "none";
    specialBox.style.display = "none";
  } else {
    overlay.style.display = "block";
    specialBox.style.display = "block";
  }
}

function toggleOverlay_2() {
  var overlay = document.getElementById('overlay');
  var specialBox = document.getElementById('specialBox_2');
  overlay.style.opacity = .8;
  if (overlay.style.display == "block") {
    overlay.style.display = "none";
    specialBox.style.display = "none";
  } else {
    overlay.style.display = "block";
    specialBox.style.display = "block";
  }
}

div#overlay {
  display: none;
  z-index: 2;
  background: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  text-align: center;
}
div#specialBox_1 {
  display: none;
  position: fixed;
  z-index: 3000;
  height: 100%;
  width: 100%;
  background: #FFF;
  color: #000;
}
div#specialBox_2 {
  display: none;
  position: fixed;
  z-index: 3000;
  height: 100%;
  width: 100%;
  background: #FFF;
  color: #000;
}
div#wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  padding-left: 24px;
}
.closebtn {
  position: absolute;
  top: 0%;
  right: 45px;
  font-size: 40px;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<div id="overlay">
  <div id="specialBox">
    <iframe id="myVid_1" src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_1" width="100%" height="100%" frameborder="0"></iframe>
    <div class="closebtn">
      <a href="javascript:void(0)" onclick="toggleOverlay_1();">&times;</a>
    </div>
  </div>
</div>

<div id="overlay">
  <div id="specialBox">
    <iframe id="myVid_2" src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_2" width="100%" height="100%" frameborder="0"></iframe>
    <div class="closebtn">
      <a href="javascript:void(0)" onclick="toggleOverlay_2();">&times;</a>
    </div>
  </div>
</div>

<div id="wrapper">
  <input type="button" name="Google_Red" class="button_red" value="Google" a href="#" onclick="toggleOverlay_1()"></input>
  <br>

  <input type="button" name="W3Schools Red" class="button_red" value="Sealed Air" a href="#" onclick="toggleOverlay_2()"></input>
  <br>
</div>

我试图在不同的按钮点击时打开不同的视频(在叠加层中)。如果我只使用一个按钮并正确打开视频，我就可以做到这一点。但是当我尝试将不同的视频绑定(bind)到不同的按钮时，它只会将一个视频绑定(bind)到所有按钮。有人可以告诉我如何解决这个问题吗？

Answer 1

基于您的 html 和 jquery。这是您需要做的。而不是制作 2 个功能。保留一个用于切换的函数，将 iframe id 作为 toggleOverlay(playerid) 的参数。由于您的视频 iframe id 的父 div 是 specialbox，而 specialbox 父级是叠加层本身。您可以使用 jquery 的 .parent() 方法来设置它。

function toggleOverlay(playerid){
  $("#" + playerid).parent("#specialBox").parent().css("opacity",".8");
  $("#" + playerid).parent("#specialBox").parent().toggle();
  $("#" + playerid).parent("#specialBox").toggle();
}

现在，在按钮中或您调用 toggleOverlay 函数的任何地方，添加唯一的 playerid 作为参数，并根据哪个按钮处理哪个叠加层来设置您的设置。

此外，您不能有 2 个具有相同 ID 的 div。因此，将第二个覆盖 div id 更改为“overlay2”。

这是工作示例:

http://codepen.io/Nasir_T/pen/pEmEJE