Javascript 使用自定义jQuery滑块和键盘键检测事件

我构建了一个简单的自定义滑块，用户可以在其中单击网格中的一个项目，它将显示选定的项目内容，还允许用户使用左右键盘箭头浏览其他网格内容项目

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>

$( 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;
    }
  }
});
});

我这里有一个JSFIDLE和一个工作演示：

---

如何修改代码以使用户能够使用箭头键导航到所有网格项？谢谢。

将所有

网格项的
选项卡索引设置为-1，并使用
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;
}

将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;
        }
    }
});

您是否在Chrome或Safari中测试过它？我没有安装Chrome或Safari，但根据
keypress
在Chrome或Safari中的某些键不起作用，因此将
keypress
更改为
keyup
，它应该在所有浏览器中都能工作。