Question

还是初学者，请保持温柔：）

我有一个带有3个链接的CSS-lighbox：上一张图片，下一张图片和退出。链接是这样的：

<a href="#img37" class="prev"><img src="images/prev.png" /></a>

然后我有一个KBD监听脚本：

function kbdNav(e) {
        switch(e.keyCode) {
            case 37:
            // activate link "prev"
                break;
            case 39:
            // activate link "next"
                break;
            case 27:
            // activate link "exit"
                break;
        }
    }

我的目标是当按下KBD箭头时（案例37），链接@ prev.png被激活，以便灯箱图像转到上一张图像。其他2例也是如此。

可以使用哪种方法？

Answer 1

首先，选择锚元素：

var prevLink = document.querySelector('.prev');
var nextLink = document.querySelector('.next');
var exitLink = document.querySelector('.exit');

然后按如下方式编辑监听器：

function kbdNav (e) {
    switch (e.keyCode) {
        case 37:
            prevLink.click();
            break;
        case 39:
            nextLink.click();
            break;
        case 27:
            exitLink.click();
    }
}

Answer 2

考虑关闭此主题。该解决方案有效，但我的HTML结构非常混乱。

我找到了一个更好的解决方案，使用纯JS库/灯箱。

JS - 将KBD事件转换为链接点击

2 个答案: