Question

我想简化代码，因为我为每个按钮和视频重复了相同的功能，但是当我试图理解如何使单击时事物通过相同的功能运行时，我迷路了。现在，我在HTML中使用onclick，但我希望代码也使用eventListener和仅Javascript。

我已经尝试过为按钮和视频使用for循环，但是我承认我不知道自己在做什么。

<script>

    // function for "stop"
    var vid1 = document.getElementById("video1");
        vid1.style.display = "none";
    var img1 = document.getElementById("button1");

        function vidToggle1() {
            img1.style.display = "none";
            vid1.style.display = "block";
            vid1.play();
        }
        vid1.onended = function() {
            vid1.style.display = "none";
            img1.style.display = "block";
        }

    // function for "more"
    var vid2 = document.getElementById("video2");
        vid2.style.display = "none";
    var img2 = document.getElementById("button2");

        function vidToggle2() {
            img2.style.display = "none";
            vid2.style.display = "block";
            vid2.play();
        }
        vid2.onended = function() {
            vid2.style.display = "none";
            img2.style.display = "block";
        }

</script>

现在，代码可以满足我的要求，但我只是希望它更短。该代码应显示输入图像，并在单击时播放指定给该输入的视频剪辑，然后在完成播放后将视频返回到初始图像。

Answer 1

您可以仅将元素作为函数参数传递。例如：

function playVideo(vid, img) {
  img.style.display = "none";
  vid.style.display = "block";
  vid.play();

  vid.onended = function() {
    vid.style.display = "none";
    img.style.display = "block";
    vid.onended = undefined
  }
}


var vid1 = document.getElementById("video1");
vid1.style.display = "none";
var img1 = document.getElementById("button1");

var vid2 = document.getElementById("video2");
vid2.style.display = "none";
var img2 = document.getElementById("button2");

然后播放第一个可以调用的视频playVideo(vid1, img1)，然后播放第二个playVideo(vid2, img2)。

如果您有任何问题，请随时在评论中问我。

缩短代码-一种功能有多个输入/视频

1 个答案: