如何解决如何在显示一个视频时自动隐藏多个视频?
不是手动为每个视频使用 display="none";
,有没有一种自动的方法来做到这一点?这样我就不必复制/粘贴相同的代码。
(P.S. 有 21 个视频,最终会增加数百个。)
function showVideo1() {
document.getElementById('video1').style.display = "block";
document.getElementById('video2').style.display = "none";
document.getElementById('video3').style.display = "none";
document.getElementById('video4').style.display = "none";
document.getElementById('video5').style.display = "none";
}
解决方法
您可以使用 display="none" 创建一个类并将其提供给您的所有视频 如果您想显示视频,请删除此课程
document.getElementById('video1').classList.add('hide');
document.getElementById('video2').classList.remove('hide');
.hide{
display:none;
}
<div class="hide" id="video1">
video 1
</div>
<div class="hide" id="video2">
video 2
</div>
首先,遍历所有 <video>
标签以隐藏它们,然后显示您想要显示的视频。
const showVideo = (videoNumber) => {
document.querySelectorAll('video').forEach((video) => (video.style.display = "none"));
document.querySelector(`video#video${videoNumber}`).style.display = "block";
}
,
试试这个:
function showVideo(videoId) {
//hide all video
document.getElementsByTagName('video').style.display = "none";
//show special video
document.getElementById(videoId').style.display = "block";
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。