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上将.grid-item设置为-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;
}

JSFiddle

Answer 2

将keyevent附加到window元素，然后检查可见的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

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

2 个答案: