隐藏/显示基于 javascript 按钮单击的视频元素

Question

目前，我有这样的 HTML 设置：

<video  autoplay="on" id="videoNohighlight" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/02/videonohighlight.mp4"></video>
<video  autoplay="on" id="video_Q1" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q1.mp4"></video>
<video  autoplay="on" id="video_Q2" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q2.mp4"></video>
<video  autoplay="on" id="video_Q3" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q3.mp4"></video>
<video  autoplay="on" id="video_Q4" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q4.mp4"></video>

<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q1">Q1</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q2">Q2</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q3">Q3</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q4">Q4</a>

和这样的Javascript

function reply_click(clicked_id){
    var video = document.getElementById("video" + clicked_id);
    var videoNohighlight = document.getElementById("videoNohighlight");

    if (video.style.display === "none") {
        video.style.display = "block";
        videoNohighlight.style.display = "none";
    } else {
        video.style.display = "none !important"; 
    }               
}   

JSFiddle 链接：https://jsfiddle.net/7x82vsah/1/

如果有人点击了所有按钮，这些按钮将充当切换按钮，而不是显示一个视频，然后当点击下一个按钮时，隐藏上一个视频并在其位置显示新视频。需要进行哪些更改才能启用此功能？

谢谢

Answer 1

当前，当按下按钮时，您只是显示或隐藏该特定视频，但同时需要做的是在单击特定视频按钮时隐藏所有其他视频。您可以做的是为所有视频元素添加一个类，并在单击按钮时循环播放它们。

function reply_click(clicked_id){
  var videos = document.getElementsByClassName("video-tabs") // video-tabs is the class you give to all your video elements
  var videoNohighlight = document.getElementById("videoNohighlight");  
  for (var i=0; i<= videos.length -1; i++){
    if (videos[i].id == "video_"+clicked_id) {
      var isVisible = videos[i].style.display
      videos[i].style.display = isVisible === "none" ? "block" : "none";
      videoNohighlight.style.display = isVisible === "none" ? "block" : "none";
    } else {
      videos[i].style.display = "none";
    }
  }

}

Answer 2

你只需要改变你的功能：

function reply_click(clicked_id){
  var videos = document.getElementsByTagName('video');

  for (var ctr = 0; ctr < videos.length; ctr++) {
    videos[ctr].style.display= 'none';      
  }

  var video = document.getElementById("video" + clicked_id);  
  video.style.display= 'block';
}