Question

我有一个显示在我页面上的图像列表，其中多个div放在一起。

根据点击的按钮显示div。

我想使用导航键选择图像。

有人能指出我的方向吗？

到目前为止

此处具有“已选择”属性的图像以蓝色显示。点击arrowkeys，我想要突出显示各自的图像。

<div>
    <div id="page1" class="button">SHOW PAGE1</div>
    <div id="page2" class="button">SHOW PAGE2</div>
</div>
<div id="a1" class="container"> Page 1
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
</div>
<div id="a2" class="container" hidden> Page 2
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
    <img class="item" />
</div>

Answer 1

您可以使用trigger()功能

$(document).keydown(function(e) {
    switch(e.which) {

        case 37: // left
            $('#page1').trigger('click');
        break;

        case 38: // up
            $('#page2').trigger('click');
        break;

        case 39: // right
            $('#page2').trigger('click');
        break;

        case 40: // down
            $('#page1').trigger('click');
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

demo

Answer 2

更新：检查这个小提琴， http://jsfiddle.net/rYvfQ/4/

    $(document).ready(function () {
    var listItems = $(".item");
    listItems.each(function (index, value) {
        if (index % 4 == 0) {
            $(this).addClass('clear')
            // what should i do here? 
        }
    });
}); 
var el = [];
$(".pages").each(function(k,v){
    el[k] = $(this).html();
}); 
var div = $('div.mycell');
var divselected;
$(document).on('keydown',function(e) {
  var div = $('div.myrow .mycell');
    switch(e.which) {
        case 37: // left 
             if(divselected){
            divselected.removeClass('selected');
            next = divselected.prev();
            if(next.length > 0){
                divselected = next.addClass('selected');
            }else{
                divselected = div.eq(0).addClass('selected');
            }
        }else{
            divselected = div.eq(0).addClass('selected');
        }
        break;

        case 38: // up
             currentindex = $('div.myrow').find('.mycell[class*="selected"]').index()
           if(divselected){
            divselected.removeClass('selected');
           div = divselected.parent().prev().find('.mycell');

             if(div.length <= 0)
             {
                 div = divselected.parent().next().find('.mycell');
             }            
                divselected = div.eq(currentindex).addClass('selected');

        }else{

           div = $('div.mycell[class*="selected"]').parent().prev().find('.mycell')
            divselected = div.eq(currentindex).addClass('selected');

        }

        break;

        case 39: // right
             if(divselected){
            divselected.removeClass('selected');
            next = divselected.next();
            if(next.length > 0){
                divselected = next.addClass('selected');
            }else{
                divselected = div.eq(0).addClass('selected');
            }
        }else{
            divselected = div.eq(0).addClass('selected');
        }
        break;

        case 40: // down
          currentindex = $('div.myrow').find('.mycell[class*="selected"]').index()
             if(divselected){
            divselected.removeClass('selected');
           div = divselected.parent().next().find('.mycell');
             if(div.length <= 0)
             {
                 div = divselected.parent().prev().find('.mycell');
             }
                            divselected = div.eq(currentindex).addClass('selected');

        }else{

           div = $('div.mycell[class*="selected"]').parent().next().find('.mycell')
          $('div.mycell[class*="selected"]').removeClass('selected');
            divselected = div.eq(currentindex).addClass('selected');

        }
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});


$('#page1').click(function(){ 
    $(".pageslist").html(el[parseInt($(this).attr('rel'))]);
   divselected="";
});

$('#page2').click(function(){
   $(".pageslist").html(el[parseInt($(this).attr('rel'))]);
     divselected="";
});

HTML：

<div>
    <div id="page1" class="button" rel = '0'>SHOW PAGE1</div>
    <div id="page2" class="button" rel = '1'>SHOW PAGE2</div>
</div>
<div class="pageslist">
<div id="a1" class="pages"> PAGE 1
  <div class="myrow"> 
    <div class="mycell item selected"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
  </div>
  <div class="myrow">
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
  </div>
</div>
<div id="a2" class="pages" hidden> PAGE 2
  <div class="myrow">
    <div class="mycell item selected"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
  </div>
  <div class="myrow">
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
    <div class="mycell item"></div>
  </div>
</div>
</div>

Answer 3

检查这个小提琴。按键不适合小提琴。只需从该小提琴中复制整个脚本并粘贴到您的页面中并在浏览器中进行测试即可。它会工作。 http://jsfiddle.net/abhiklpm/m3MK3/12/

    $(document).ready(function () {
            var listItems = $(".item");
            listItems.each(function (index, value) {
            if (index % 4 == 0) {
                $(this).addClass('clear')
                // what should i do here? 
            }
        });
        $(document).keypress(function(e) {
            switch(e.keyCode) {
                case 37: // left
                    moveLeft();
                break;

                case 38: // up
                    moveUp();
                break;

                case 39: // right
                    moveRight();
                break;

                case 40: // down
                    moveDown();
                break;

                default: return; // exit this handler for other keys
            }
            e.preventDefault(); // prevent the default action (scroll / move caret)
        });
        $('.item').on('click',function(){
            $('.item').removeClass('selected');
            $(this).addClass('selected');
        });    

        $('#page1').on('click', function(){
            $("#a2").hide();
            $('#a1').show();
            $('#a1 .myrow:first-child .item:first-child').addClass('selected').trigger('click');
        });

        $('#page2').on('click', function(){
           $("#a1").hide();
            $('#a2').show();
            $('#a2 .myrow:first-child .item:first-child').addClass('selected').trigger('click');
        });
        function moveRight(){
            if($('.selected').next('.item').length > 0){
                $('.selected').removeClass('selected').next('.item').addClass('selected')
            }
        }
        function moveLeft(){
            if($('.selected').prev('.item').length > 0){
                $('.selected').removeClass('selected').prev('.item').addClass('selected')
            }
        }
        function moveDown(){
            if($('.selected').parent('.myrow').next('.myrow').length > 0){   
                var index = $('.selected').index();     
                $('.selected').removeClass('selected').parent('.myrow').next('.myrow').find('.item').eq( index ).addClass('selected');
            }
        }
        function moveUp(){
            if($('.selected').parent('.myrow').prev('.myrow').length > 0){   
                var index = $('.selected').index();     
                $('.selected').removeClass('selected').parent('.myrow').prev('.myrow').find('.item').eq( index ).addClass('selected');
            }
        }
});

Answer 4

此解决方案集成了页面切换功能。

var $rows = $('.myrow'),
    $cells = $('.mycell');


$(document).keydown(function (e) {

    var arrowKeys = [37, 38, 39, 40];
    var directions = ['left', 'up', 'right', 'down'];
    var arrowIndex = $.inArray(e.which, arrowKeys);
    if (arrowIndex !== -1) {
        var dir = directions[arrowIndex];
        var $currCell = $cells.filter('.selected').removeClass('selected');
        var cellIndex = $currCell.index();
        var $currRow = $currCell.parent();
        if (dir == 'up' || dir == 'down') {                
            switchRows($currRow, dir, cellIndex);
        } else {
            var $nextCell;
            if( dir=='left'){
               $nextCell= $currCell.prev().addClass('selected');
                if( !$nextCell.length){
                    switchRows($currRow, 'up', 150000);
                }
            }else{
                $nextCell= $currCell.next().addClass('selected');
                 if( !$nextCell.length){
                    switchRows($currRow, 'down',0);
                }
            }   
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    }

});

/* switches rows and toggles page visibility if next image on another page going up or down*/
function switchRows ($currRow, direction, cellIndex) {
    var $next, curRowIndex = $rows.index( $currRow);
    if (direction == 'up') {
        $next = $rows.eq(curRowIndex-1)
        $next = $next.length ? $next : $rows.last();
    } else {
       $next = $rows.eq(curRowIndex+1)
        $next = $next.length ? $next : $rows.first();
    }
    var $nextCell= $next.find('.mycell').eq(cellIndex);
    if( !$nextCell.length){
        $nextCell= $next.find('.mycell').last();
    }
    $nextCell.addClass('selected');
    $currRow.parent().hide();
    $next.parent().show();
    /* add button class change logic */
}

的 DEMO

通过导航键选择div的正确元素

4 个答案: