隐藏/显示基于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 link： 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';
}