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

我自己很难找到答案，也许有人能帮我

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

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

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

---

这可以通过存储框的位置，然后对照

窗口.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);
        }
    }
});

var-boxLefts=[]；
$（'.box'）。每个（函数（i，el）{
boxLefts.push（this.offsetLeft）；
});
$（文档）.keydown（函数（e）{
var dir=false，
targetLeft=-1；
开关（如钥匙代码）{
案例37：
dir=-1；
打破
案例39：
dir=1；
打破
}
if（dir）{
e、 预防默认值（）；
winLeft=window.scrollX；
$。每个（左框，函数（i，v）{
if（（dir==1&&winLeftv））{
targetLeft=v；
}
});
如果（targetLeft>=0）{
$（'html，body'）.animate（{scrollLeft:targetLeft}，1000）；
}
}
});

---

Yuuuuuuuuuuuuuppppppppppppyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

请在此处查看：

---

所以我已经在我的index.html页面上使用了这个。工作完美。但我遇到了一个我无法解决的问题。我正在将新的照片库（.box）动态加载到包装器中。当我这样做，并使用我的箭头导航，它跳到下一个图像的最后一个，并返回到上一个图像的第一个，跳过之间的一切。我试着将它转换成一个函数，然后在window.load上调用该函数，以及在加载新的.html页面后调用该函数。问题仍然存在。有什么想法吗？

$(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;
        }
    });
});

#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;
}