使用 jQuery 使用键盘箭头跳转到下一个元素答案

【问题标题】：Jump to next element with keyboard arrows with jQuery使用 jQuery 使用键盘箭头跳转到下一个元素
【发布时间】：2012-04-07 06:30:11
【问题描述】：

我很难自己找到答案，所以也许有人可以提供帮助。

我有一个水平滚动的 div（包装器），里面有多个 div（框）。

我希望能够单击键盘箭头键来跳转到下一个元素。每次跳跃时，窗口都会向左滚动。

我创建了一个基本的 jsFiddle，人们也可以添加它来添加键盘导航。

http://jsfiddle.net/ryanjay/JjhUN/

【问题讨论】：

标签： jquery keyboard navigation

【解决方案1】：

这可以通过存储框的位置然后针对window.scrollX 位置进行测试来实现。然后根据按下的箭头键动画到最近的框。

var boxLefts = [];
$('.box').each(function(i, el){
    boxLefts.push(this.offsetLeft);
});

$(document).keydown(function(e) {
    var dir = false,
        targetLeft = -1;

    switch (e.keyCode) {
    case 37:
        dir = -1;
        break;                
    case 39:
        dir = 1;
        break;
    }

    if (dir) {
        e.preventDefault();
        winLeft = window.scrollX;
        $.each(boxLefts, function(i, v){
            if ((dir == 1 && winLeft < v && targetLeft < 0) ||
                (dir == -1 && winLeft > v)) {
                targetLeft = v;
            }
        });
        if (targetLeft >= 0) {
            $('html, body').animate({scrollLeft: targetLeft}, 1000);
        }
    }
});

See Demo

【讨论】：

所以...我已经让它在我的 index.html 页面上工作。完美运行。但是我遇到了一个我无法弄清楚的问题。我正在将新的照片库（.box）动态加载到包装器中。当我这样做并使用我的箭头进行导航时，它会跳到下一张的最后一张图片，然后回到上一张的第一张，跳过中间的所有内容。我试图把它变成一个函数，然后在 window.load 上调用该函数，以及在新的 .html 页面中加载之后。问题仍然存在。有什么想法吗？

【解决方案2】：

yuuuuuuuuuppppppppppppyyyyyyyyyyyy 终于搞定了.. :)

在这里查看：http://jsfiddle.net/JjhUN/7/

$(function() {
    var index = 0;
    var elems = $('.box');
    var len = $('.box').length;
    elems.eq(index).addClass('selected_div');
    $(document).keyup(function(e) {
        var key = e.keyCode || e.charCode || e.which;
        switch (key) {
        case 39:
            if(index < len-1){
                elems.eq(index).removeClass('selected_div');
                index = index +1;
                elems.eq(index).addClass('selected_div');
                $('#wrapper').animate({"left": "-=210px"}, "slow");
                }
            break;
        case 37:
            if(index > 0){
              elems.eq(index).removeClass('selected_div');
              index = index - 1;
              elems.eq(index).addClass('selected_div');
              $('#wrapper').animate({"left": "+=210px"}, "slow");
            }
            break;
        }
    });
});

CSS：

#wrapper {
    position:absolute;
    white-space: nowrap;
}
.selected_div{
    background-color: blue;
}
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 0 10px 0 0;
    display: inline-block;
}

【讨论】：