如何在显示一个视频时自动隐藏多个视频？

Question

有没有一种自动方法，而不是手动为每个视频使用 display="none";？这样我就不必 copy/paste 相同的代码了。

(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";
    }

Answer 1

这样试试：

function showVideo(videoId) {
    //hide all video
    document.getElementsByTagName('video').style.display = "none";
    //show special video
    document.getElementById(videoId').style.display = "block";
}

Answer 2

您可以使用 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>

Answer 3

首先，遍历所有 <video> 标签以将它们全部隐藏，然后显示您要显示的视频。

const showVideo = (videoNumber) => {
  document.querySelectorAll('video').forEach((video) => (video.style.display = "none"));
  document.querySelector(`video#video${videoNumber}`).style.display = "block";
}

如何在显示一个视频时自动隐藏多个视频？

How to hide multiple videos automatically while one is displayed?

javascript

display

getelementbyid

nonetype