keydown에서 클래스 이름으로 div를 탐색하는 방법은 무엇입니까?

Question

나는 이미지 div 목록을 가지고 있고 keyboard.I에서 오른쪽, 왼쪽, 위, 아래 화살표를 눌러 탐색하고 싶습니다. 다음 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 :

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

012 :

<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의 n 번째 하위를 대상으로하고 있지만 각 div에는 하나의 a 만 있기 때문에 논리에 결함이 있습니다. 이 정상 탭 순서를 유지 (

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

당신은 그들에게의 tabindex = 0을 제공함으로써 div의 초점을 맞출 수 있습니다 : 그것은이 같은 부모 DIV의 n 번째 자녀 (# Div1) 등의 사업부를 대상으로해야 JS 로직을 조금 더 단순하게 만드는 포커스를받을 수 있습니다). 여기

는이 codepen 일하고 : 답장을 https://codepen.io/anon/pen/dVzoQK