不同的var和if对于不同的视频不起作用

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;
}
});

但是我得到错误:"'视频'已经定义。不要重复声明。我知道是代码的组成出了问题，但我花了一段时间寻找正确的方法，却找不到。任何帮助都将非常感激!

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;
}
});

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

甚至更好，你可以这样做:

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

然后命名为

setListener('b1' , 'b')