使用香草JavaScript显示一个i框架，隐藏另一个

问题描述

如果用户已经选择了一个视频（使用下拉菜单），而他们选择了另一个，则我希望将第一个视频替换为新视频。相反，我现在的设置方式是，在第一个视频之后附加第二个视频（如果选择了第三个视频，甚至是第三个视频）。在加载新视频之前，如何更改代码以清除页面上的所有当前视频？

<body>
  <h1>Let's Meditate.</h1>
  <select id="timer">
    <option value="select" disabled selected>Select One...</option>
    <option value="twenty">20 minutes</option>
    <option value="fifteen">15 minutes</option>
    <option value="ten">10 minutes</option>
    <option value="five">5 minutes</option>
  </select>
  <button type="button" onclick="meditate();">Go!</button>
  <button onclick="refresh();">Refresh</button>
  <div class="videos">
    <iframe id="twentyMinVid" width="560" height="315" src="https://www.youtube.com/embed/VjxGjDo1tWA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="fifteenMinVid" width="560" height="315" src="https://www.youtube.com/embed/aIIEI33EUqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="tenMinVid" width="560" height="315" src="https://www.youtube.com/embed/Xl_B45DpMLU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="fiveMinVid" width="560" height="315" src="https://www.youtube.com/embed/3RxXiFgkxGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <script>

    function meditate() {
      var timer = document.getElementById("timer").value;

      if(timer == "twenty") {
        document.getElementById("twentyMinVid").style.display = "block";
      } else if(timer == "fifteen") {
        document.getElementById("fifteenMinVid").style.display = "block";
      } else if(timer == "ten") {
        document.getElementById("tenMinVid").style.display = "block";
      } else if(timer == "five") {
        document.getElementById("fiveMinVid").style.display = "block";
      } else {
        document.querySelector(".videos").innerHTML = "Please select a time limit and click Go."
      }
    }

    function refresh() {
      location.reload();
    }
  </script>
</body>

解决方法

请尝试更改iframe的src，而不是在display: block那里。

 <body>
 <h1>Let's Meditate.</h1>
 <select id="timer">
<option value="select" disabled selected>Select One...</option>
<option value="twenty">20 minutes</option>
<option value="fifteen">15 minutes</option>
<option value="ten">10 minutes</option>
<option value="five">5 minutes</option>
</select>
<button type="button" onclick="meditate();">Go!</button>
 <button onclick="refresh();">Refresh</button>
 <div class="videos">
 <iframe id="iframe" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

<script>

 function meditate() {
  var timer = document.getElementById("timer").value;
  var iframe = document.getElementById("iframe");

  if(timer == "twenty") {
    iframe.src = "https://www.youtube.com/embed/VjxGjDo1tWA";
  } else if(timer == "fifteen") {
    iframe.src = "https://www.youtube.com/embed/aIIEI33EUqI";
  } else if(timer == "ten") {
    iframe.src = "https://www.youtube.com/embed/Xl_B45DpMLU";
  } else if(timer == "five") {
    iframe.src = "https://www.youtube.com/embed/3RxXiFgkxGc";
  } else {
    document.querySelector(".videos").innerHTML = "Please select a time limit and click Go."
    }
  }

  function refresh() {
      location.reload();
  }
</script>

这是我的解决方案，我对您的代码做了一些修改。

<body>
  <h1>Let's Meditate.</h1>
  <select id="timer">
    <option value="select" disabled selected>Select One...</option>
    <option value="twentyMinVid">20 minutes</option>
    <option value="fifteenMinVid">15 minutes</option>
    <option value="tenMinVid">10 minutes</option>
    <option value="fiveMinVid">5 minutes</option>
  </select>
  <button type="button" onclick="meditate();">Go!</button>
  <button onclick="refresh();">Refresh</button>
  <div class="videos">
    <iframe id="twentyMinVid" width="560" height="315" src="https://www.youtube.com/embed/VjxGjDo1tWA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="fifteenMinVid" width="560" height="315" src="https://www.youtube.com/embed/aIIEI33EUqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="tenMinVid" width="560" height="315" src="https://www.youtube.com/embed/Xl_B45DpMLU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe id="fiveMinVid" width="560" height="315" src="https://www.youtube.com/embed/3RxXiFgkxGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <script>
  function meditate() {
   var timer = document.getElementById("timer").value;
   if (timer === 'select') {
     alert("Please select a time limit and click Go.");
     return;
   }
   var options = document.getElementById("timer").options;
   for (var i = 1; i < options.length; i++) {
     if (options[i].value === timer) {
       document.getElementById(timer).style.display = "block";
     } else {
       document.getElementById(options[i].value).style.display = "none";
     }
   }

 }

 function refresh() {
   location.reload();
 }

  </script>
</body>

我试图使其更通用，因此，如果您在下拉列表中添加更多选项，则如果下拉列表值与frameId相同，则无需在逻辑上进行任何修改即可显示/隐藏视频

链接到fiddle

这是因为在显示新iframe时，您没有隐藏现有iframe。

例如，在此块中：

if(timer == "twenty") {
    document.getElementById("twentyMinVid").style.display = "block";

    //Add code here for hiding the other divs
     document.getElementById("fifteenMinVid").style.display = "none";
     document.getElementById("tenMinVid").style.display = "none";
     document.getElementById("fiveMinVid").style.display = "none";
  }
....You need to do this same thing in other sections so that you are hiding other divs while you show the correct div.

html if-statement javascript