不同视频的不同 vars 和 ifs 不起作用

Question

我正在尝试创建一个功能，如果按下一个键，就会出现一个视频。我已经设法用一把钥匙完成了它并且工作正常：

 var video = document.getElementById('b1');   
document.addEventListener('keydown', (e) => {
   if(e.key === "b") {
     video.play(); video.currentTime = 0;
   }
});

但我想对几个不同的键（准确地说是 26 个）执行此操作。我认为我需要做的是复制相同的代码并将其放在下面，如下所示：

var video = document.getElementById('b1');   
document.addEventListener('keydown', (e) => {
   if(e.key === "b") {
     video.play(); video.currentTime = 0;
   }
});

var video = document.getElementById('d1');   
document.addEventListener('keydown', (e) => {
   if(e.key === "d") {
     video.play(); video.currentTime = 0;
   }
});

但我收到错误消息：“'video' 已定义。请勿重新声明”。我知道问题出在代码的组成上，但我花了一段时间寻找正确的方法，但找不到。任何帮助将不胜感激！

Answer 1

一个变量只能有一个值。当您重新分配 video 时，旧值将丢失。当事件侦听器触发时，它们将使用最后分配的值，因此两个键将播放相同的视频。

您可以使用不同的变量，或者更好的方法是使用将键映射到视频的对象。

var videos = {
    'b': document.getElementById('b1'),
    'd': document.getElementById('d1')
}

document.addEventListener('keydown', e => {
    let video = videos[e.key];
    if (video) {
        video.play();
        video.currentTime = 0;
    }
});

Answer 2

事实上如果你写

var video = document.getElementById('b1');   
document.addEventListener('keydown', (e) => {
   if(e.key === "b") {
     video.play(); video.currentTime = 0;
   }
});

var video = document.getElementById('d1');   
document.addEventListener('keydown', (e) => {
   if(e.key === "d") {
     video.play(); video.currentTime = 0;
   }
});

您试图多次定义变量视频，这是不允许的。如果您有多个具有不同 ID 的元素，您应该添加不同的变量名称。

更好的是，您可以这样做：

setListener(elementID, keyToHaveEffect) {
   const videoElement = document.getElementById(elementID);
   if (e.key === keyToHaveEffect) {
      if (videoElement) {
         videoElement.play(); videoElement.currentTime = 0;
      }
   }
}

然后像这样称呼它

setListener('b1' , 'b')

不同视频的不同 vars 和 ifs 不起作用

different vars and ifs for different videos not working

javascript

if-statement

var