使用自定义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/ 请问如何修改代码以使用户能够使用箭头键导航到所有网格项？谢谢。

- user1230041

Answer 1

将所有的.grid-item元素的tabindex设置为-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;
}

{{链接1：JSFiddle}}

- razz

---

你在Chrome或Safari中测试过吗？ - ElChiniNet

我没有安装Chrome或Safari，但是根据这里的说法，在某些按键上 keypress 在 Chrome 或 Safari 中无效，因此将 keypress 更改为 keyup，并且它应该在所有浏览器中都能正常工作。 - razz

Answer 2

将 keyevent 附加到窗口元素，然后检查可见的 grid-item-content：

$(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

- ElChiniNet