基于按钮点击的隐藏显示视频元素，使用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.net7x82vsah1

如果有人点击了所有的按钮，这些按钮就像切换器一样，而不是显示一个视频，然后当下一个按钮被点击时，隐藏前一个视频，并在其位置显示新的视频。需要改变什么才能实现这个功能？

谢谢你

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';
}