Question

我正在尝试将箭头键导航添加到this image gallery。

它应该与this

类似

var chosen = "";
$(document).keydown(function (e) { // 38-up, 40-down
    if (e.keyCode == 40) {
        if (chosen === "") {
            chosen = 0;
        } else if ((chosen + 1) < $('li.t').length) {
            chosen++;
        }
        $('li.t').removeClass('selected');
        $('li.t:eq(' + chosen + ')').addClass('selected');
        $('li.t').click(this);
        return false;
    }
    if (e.keyCode == 38) {
        if (chosen === "") {
            chosen = 0;
        } else if (chosen > 0) {
            chosen--;
        }
        $('li.t').removeClass('selected');
        $('li.t:eq(' + chosen + ')').addClass('selected');
        $('li.t').click(this);
        return false;
    }
});

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

如果使用箭头键向下移动可能会强制滚动以保持选定的缩略图在视图中，这将会很棒。

...如果我让它工作，我想我遇到的下一个问题是，在iframe中点击某些内容时，我将失去对主页面和箭头键导航的关注。这是一个可以忽略不计的问题，但如果有一个简单的解决方案，我想使用它。

感谢。

Answer 1

使用您提供的jsfiddle，您可以使用jquery的trigger（）方法模拟用户点击。

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

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

<强>的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');
});

在此示例中，keydown事件只是确定哪个元素应该是下一个“已选择”。一旦找到，就调用selectImage（）函数，它基本上模拟鼠标点击所选元素。

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

可以在http://jsfiddle.net/DPHWZ/

找到有关此工作样本的小提琴

箭头键画廊导航

1 个答案: