如何在 keydown 上使用类名在 div 之间导航？

Question

我有图像 div 列表，并希望通过按下键盘上的右、左、上和下箭头在它们之间导航。我尝试了以下 jQuery，但是当我按下箭头时图像焦点永远不会改变。我想要图像边框当它收到焦点时会发光，以便用户知道选择了哪个。（我希望默认焦点始终位于第一个 div 上，始终在页面加载时）。任何人都可以帮我解决这个问题。提前致谢。

分区：

<div class="scroller">
<div id="Div1" style="display: visiable;">  

<div class="image1">
<a href="javascript:doIt('10')">
<img src="./content/1/102.jpg" alt="..">Movie 1
</a>
</div>
<div class="image2">
<a href="javascript:doIt('11')">
<img src="./content/2/102.jpg" alt="..">Movie 2
</a>
</div>
<div class="image3">
<a href="javascript:doIt('12')">
<img src="./content/3/102.jpg" alt="..">Movie 3
</a>
</div>
<div class="image4">
<a href="javascript:doIt('13')">
<img src="./content/4/102.jpg" alt="..">Movie 4
</a>
</div>

</div>
</div>

jquery:

<script>
$(document).keydown(function (e) {
        var index = $(":focus").index() + 1;
        if (e.which === 37) {
                alert("left:37");
            $('div a:nth-child(' + (index - 1) + ')').focus();
    } else if (e.which === 39) {
                alert("right 39");
            $('div a:nth-child(' + (index + 1) + ')').focus();
    } else if (e.which === 38) {
                alert("Up:38");
            $('div  a:nth-child(' + (index - 1) + ')').focus();
    } else if (e.which === 40) {
                alert("Down:40");
            $('div a:nth-child(' + (index + 1) + ')').focus();
    }
});


</script>

css:

<style>

.image {
float:left;
width: 50%;
}

img {
width:100%;
}

a:focus {
  //border: 1px solid black;
  outline: none;
  border-color: #9ecaed;
  box-shadow: 0 0 10px #9ecaed;
}

.container {
width:100%;
}

@media (max-width: 740px){
.image {
width: 100%;
}
}

div.scroller {
overflow:scroll;    
}
</style>

Answer 1

你的选择器是问题：

$('div a:nth-child(' + (index - 1) + ')').focus();

这是针对 div 的 a:nth-child，但由于每个 div 都只有一个 a，所以逻辑是有缺陷的。它应该将 div 定位为父 div (#Div1) 的第 n 个子元素，如下所示：

$('#Div1 div:nth-child(' + (index - 1) + ')').focus();

您可以通过为 div 设置 tabindex=0 来使它们具有焦点（这可以保持正常的跳格顺序，但允许它们接收焦点，从而使您的 JS 逻辑更简单一些）。

这是一个有效的代码笔：https://codepen.io/anon/pen/dVzoQK