обнаружение событий с помощью пользовательского jQuery слайдера и клавиш клавиатуры

Question

Я создал простой пользовательский слайдер, в котором пользователь может щелкнуть элемент из сетки и отобразит содержимое выбранного элемента, а также позволит пользователям перемещаться по другому содержимому сетки элементы с левой и правой стрелками клавиатуры.

HTML-структура выглядит следующим образом:

<div class="grid-container"> <!-- this is the grid container --> 

    <div class="grid-item" tabindex="1"> <!-- grid item --> 
    <div class="grid-item-preview"> <!-- preview container --> 
     <img class="grid-item-preview-image" src="http://placehold.it/360x240" /> 
    </div> 
    <div class="grid-item-content"> <!-- content container, hidden at first and opens when the user clicks on the preview container --> 
     <div class="grid-item-content-left"> 
     <img class="grid-item-original-image" src="http://placehold.it/640x480?text=Item1" /> 
     </div> 
     <div class="grid-item-content-right"> 
     <h3 class="grid-item-title"> 
      This is a test item 
     </h3> 
     <p class="grid-item-text"> 
      This is some filler text 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

Проблема заключается в том, что, с кодом у меня есть, JQuery только проходит один раз корыто HTML элементов и, если пользователь снова нажимает клавиши со стрелками, это просто не работает снова, если пользователь не закрывается и снова открывает новый элемент сетки.

Мои JS/JQuery код выглядит следующим образом:

$(document).ready(function() { 
$('.grid-item') 
.on('click', function() { 
    $(this).toggleClass('open-grid-item'); 
    $(this).find('.grid-item-content').fadeToggle(); 
}) 
    .on('keydown', function(event) { 
    if($(this).hasClass('open-grid-item')) { 
    switch(event.keyCode) { 
     case 37: $(this)     //User press left arrow 
     .removeClass('open-grid-item') //Removes class 
     .find('.grid-item-content')  //Find the content container 
     .fadeOut()      //Fade out content container      
     .parent()       //Traverses to parent div .grid-item 
     .prev('.grid-item')    //Traverses to previous div .grid-item 
     .addClass('open-grid-item')  //Add class open grid 
     .find('.grid-item-content')  //Traverses to content container of the new div 
     .fadeIn();      //Shows content div 
     break; 
     case 39: $(this) 
     .removeClass('open-grid-item') //Same as before, but traverses to next .grid-item 
     .find('.grid-item-content') 
     .fadeOut() 
     .parent() 
     .next('.grid-item') 
     .addClass('open-grid-item') 
     .find('.grid-item-content') 
     .fadeIn(); 
     break; 
    } 
    } 
}); 
}); 

У меня есть jsfiddle с рабочим демо здесь: https://jsfiddle.net/wuzrcnus/4/

Как я могу изменить свой код, чтобы позволить пользователю перемещаться по всей сетке предметы со стрелками? Благодарю.

Answer 1

Набора tabindex -1 на всех .grid-item и использовать focus() привести к следующему или предыдущему элементу в фокус:

switch (event.keyCode) 
{ 
    case 37: 
     $(this) 
      .removeClass('open-grid-item') 
      .find('.grid-item-content') 
      .fadeOut() 
      .parent() 
      .prev('.grid-item') 
      .focus() 
      .addClass('open-grid-item') 
      .find('.grid-item-content') 
      .fadeIn(); 
    break; 
    case 39: 
     $(this) 
      .removeClass('open-grid-item') 
      .find('.grid-item-content') 
      .fadeOut() 
      .parent() 
      .next('.grid-item') 
      .focus() 
      .addClass('open-grid-item') 
      .find('.grid-item-content') 
      .fadeIn(); 
    break; 
} 

JSFiddle

Answer 2

Привинчивания KeyEvent к иллюминатору и следующей проверке для сеточного пункт-контент, который виден:

$(window).on('keydown', function(event) { 

    if($('.grid-item-content:visible').length > 0){ 

     var gridItem = $('.grid-item-content:visible').parent(".grid-item"); 

     switch(event.keyCode) { 
      case 37: 
       gridItem 
        .removeClass('open-grid-item') 
        .find('.grid-item-content') 
        .fadeOut()      
        .parent() 
        .prev('.grid-item') 
        .addClass('open-grid-item') 
        .find('.grid-item-content') 
        .fadeIn(); 
      break; 
      case 39: 
       gridItem 
        .removeClass('open-grid-item') 
        .find('.grid-item-content') 
        .fadeOut() 
        .parent() 
        .next('.grid-item') 
        .addClass('open-grid-item') 
        .find('.grid-item-content') 
        .fadeIn(); 
      break; 
     } 
    } 
}); 

jsfiddle