文章/答案/技术大牛

发布

社区首页 >问答首页 >显示一个我的框架，用香草JavaScript隐藏另一个

问显示一个我的框架，用香草JavaScript隐藏另一个
EN

Stack Overflow用户

提问于 2020-09-11 17:23:47

回答 3查看 143关注 0票数 1

如果用户已经选择了一个视频(使用下拉列表)，并且他们选择了另一个视频，我希望第一个视频被替换为新视频。相反，我现在是如何设置它的，它只是在第一个视频之后追加第二个视频(甚至是第三个视频，如果选择了第三个视频)。在加载新视频之前，如何更改代码以清除页面中的任何当前视频？

<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>

javascript

html

if-statement

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-09-11 17:31:58

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

例如，在这个块中：

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.

票数 0

Stack Overflow用户

发布于 2020-09-11 17:33:50

与其在那里创建display: block，不如尝试更改iframe。

 <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>

票数 1

Stack Overflow用户

发布于 2020-09-11 18:33:14

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

<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相同，则不需要对显示/隐藏视频的逻辑进行修改。

链接到小提琴

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63851673

复制

相似问题

问显示一个我的框架，用香草JavaScript隐藏另一个
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示一个我的框架，用香草JavaScript隐藏另一个EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示一个我的框架，用香草JavaScript隐藏另一个
EN