Wie navigiere ich zwischen divs mit Klassennamen auf Keydown?

Question

Ich habe eine Liste von Bild divs und will zwischen ihnen durch rechts, links, oben und unten Pfeile auf der Tastatur gedrückt werden.Ich versuchte die folgende jQuery aber der Bild Fokus ändert sich nie, wenn ich die Pfeile drücken.Ich möchte die Bildgrenze glüht wenn es den Fokus erhält, so weiß der Benutzer, welcher ausgewählt ist. (Ich möchte den Standardfokus beim ersten Laden immer auf der Seite haben.) Kann jemand mir helfen, dieses Problem zu beheben. Vielen Dank im Voraus.

Divs:

<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

Ihre Wähler sind das Problem:

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

Dies zielt auf ein: nth-Kind von div, aber da jedes div nur ein einziges a hat, ist die Logik fehlerhaft. Es sollte die div als n-te-Kind der Mutter div (# Div1), wie dieses Ziel:

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

Sie können die divs fokussierbar machen, indem ihnen einen tabindex = 0 (dies führt zur Erhaltung normale Tabulatorreihenfolge geben, erlaubt ihnen jedoch, den Fokus zu erhalten, wodurch Ihre JS-Logik etwas einfacher wird).

Hier ist ein codepen Arbeits: https://codepen.io/anon/pen/dVzoQK