document.onkeydown = function (e) { // 检查是否显示悬浮窗 if (isPopupVisible) { // 获取所有具有相同类名的图片元素 var imgs = document.querySelectorAll('preview-image'); var currentIndex = Array.from(imgs).indexOf(img); // 获取当前图片在数组中的索引 switch (e.keyCode) { case 37: // 左箭头键 currentIndex = (currentIndex - 1 + imgs.length) % imgs.length; img.src = imgs[currentIndex].src; break; case 39: // 右箭头键 currentIndex = (currentIndex + 1) % imgs.length; img.src = imgs[currentIndex].src; break; case 38: // 上箭头键 // 同行之前一张图片 // 实现逻辑代码 break; case 40: // 下箭头键 // 同行之后一张图片 // 实现逻辑代码 break; } } };我添加进入后实际使用时 img.src = imgs[currentIndex].src报错
时间: 2024-02-14 14:30:11 浏览: 101
根据您提供的代码,发现在获取图片元素时,选择器应为`.preview-image`而不是`preview-image`。请将`document.querySelectorAll('preview-image')`修改为`document.querySelectorAll('.preview-image')`,以正确选择具有`.preview-image`类名的图片元素。
修改后的代码如下所示:
```javascript
document.onkeydown = function (e) {
// 检查是否显示悬浮窗
if (isPopupVisible) {
// 获取所有具有相同类名的图片元素
var imgs = document.querySelectorAll('.preview-image');
var currentIndex = Array.from(imgs).indexOf(img); // 获取当前图片在数组中的索引
switch (e.keyCode) {
case 37: // 左箭头键
currentIndex = (currentIndex - 1 + imgs.length) % imgs.length;
img.src = imgs[currentIndex].src;
break;
case 39: // 右箭头键
currentIndex = (currentIndex + 1) % imgs.length;
img.src = imgs[currentIndex].src;
break;
case 38: // 上箭头键
// 同行之前一张图片
// 实现逻辑代码
break;
case 40: // 下箭头键
// 同行之后一张图片
// 实现逻辑代码
break;
}
}
};
```
请注意,为了正确选择图片元素,选择器应该以`.`开头,表示选择具有该类名的元素。
希望这次能解决您的问题!如果还有其他疑问,请随时提问。
阅读全文