Question

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

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的第n个孩子，但由于每个div只有一个a，逻辑是有缺陷的。它应该将div定位为父div（＃Div1）的第n个子节点，如下所示：

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

你可以通过给它们一个tabindex = 0来使div成为焦点（这可以保持正常的Tab键顺序，但允许它们获得焦点，使你的JS逻辑更简单一些）。

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

如何在keydown上具有类名的div之间导航？

1 个答案: