Jquery 箭头键库导航

我正在尝试将箭头键添加到导航

它的工作原理应该类似于

var selected=“”；
$（文档）.keydown（函数（e）{//38向上，40向下
如果（e.keyCode==40）{
如果（已选择==“”）{
选择=0；
}如果（（选择+1）<$（'li.t'）。长度）{
选择++；
}
$（'li.t'）.removeClass（'selected'）；
$（'li.t:eq（'+selected+'））.addClass（'selected'）；
$（'li.t'）。单击（此）；
返回false；
}
如果（e.keyCode==38）{
如果（已选择==“”）{
选择=0；
}否则，如果（选择>0）{
选择--；
}
$（'li.t'）.removeClass（'selected'）；
$（'li.t:eq（'+selected+'））.addClass（'selected'）；
$（'li.t'）。单击（此）；
返回false；
}
});

…但我希望每个箭头键都像单击一样工作，因为它应该在iframe中加载一个页面，同时执行另一个单击操作（将黄色框架移动到新选择的缩略图），就像现在单击时一样

如果向下按箭头键可以强制滚动以保持所选缩略图在视图中，这也将非常好

…如果我能做到这一点，我想我遇到的下一个问题是，每当在iframe中单击某个内容时，我就会失去对主页和箭头键导航的关注。这是一个微不足道的问题，但如果有一个简单的解决方案，我想使用它

---

谢谢。

使用您提供的JSFIDLE，您可以使用jquery的trigger（）方法模拟用户单击

这将导致单击事件上的当前代码运行。这样你就不必担心有逻辑来跟踪点击或按键

Javascript

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    chosen = $('li.selected').index(); //grab the current selection
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        selectImage(chosen);
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        selectImage(chosen);
        return false;
    }
});

function selectImage(whichIndex) {
    $('li:eq('+whichIndex+') a').trigger("click");
}
$("#selection a").click(function() {
    $('li').removeClass('selected'); 
    $(this).parent().addClass('selected');
});

var selected=“”；
$（文档）.keydown（函数（e）{//38向上，40向下
selected=$（'li.selected'）.index（）；//获取当前选择
如果（e.keyCode==40）{
如果（已选择==“”）{
选择=0；
}如果（（选择+1）<$（'li'）。长度）{
选择++；
}
选择图像（已选择）；
返回false；
}
如果（e.keyCode==38）{
如果（已选择==“”）{
选择=0；
}否则，如果（选择>0）{
选择--；
}
选择图像（已选择）；
返回false；
}
});
功能选择图像（whichIndex）{
$（'li:eq（'+whichIndex+'）a'）。触发器（“单击”）；
}
$（“#选择a”）。单击（函数（）{
$（'li'）.removeClass（'selected'）；
$（this.parent（）.addClass（'selected'）；
});

在这个示例中，keydown事件只是指出下一个“选择”的元素。找到后，将调用selectImage（）函数，该函数基本上模拟鼠标单击所选元素

单击元素（无论是用户单击，还是通过jquery调用的单击）将运行取消选择旧元素和选择新元素的实际逻辑

---

可以在这里找到一个工作示例

请缩进您的代码，这样读起来容易多了。：）你能把一些形式的演示放在一起，展示你是如何处理图像的，以及它们是如何布置的吗？我布置图像的方式是如何在上面的“这个图像库”链接上显示的，你看到了吗？不知道如何制作演示。很抱歉，我把代码留给我了，不管怎么说，我几乎不可能阅读它/谢谢JuanT…我只是想实现这一点，我注意到当我将一个真实的url添加到一个列表项时，它不会在按键时加载url，但在单击时会工作。点击和按键还不相等；有办法解决这个问题吗？真奇怪，应该能用。没有应该抑制鼠标单击或按键的代码。你能告诉我到目前为止你有什么吗？你可以在更新的JSFIDLE中看到，最后两个列表项的URL只在单击时加载到下面的iframe上，而在使用箭头键选择时则没有加载到iframe上…

$('li:eq('+whichIndex+') a').trigger("click");

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    chosen = $('li.selected').index(); //grab the current selection
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        selectImage(chosen);
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        selectImage(chosen);
        return false;
    }
});

function selectImage(whichIndex) {
    $('li:eq('+whichIndex+') a').trigger("click");
}
$("#selection a").click(function() {
    $('li').removeClass('selected'); 
    $(this).parent().addClass('selected');
});