1

我的页面上显示了一个图像列表，其中多个 div 彼此重叠。

div 根据单击的按钮显示。

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

有人可以指点我一个方向。

到目前为止的代码 -小提琴演示

此处具有“已选择”属性的图像以蓝色显示。单击箭头键时，我希望突出显示相应的图像。

<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>
4

4 回答 4

2

您可以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)
});

演示

于 2013-11-07T06:24:09.063 回答
1

检查这个小提琴。按键在小提琴中不起作用。只需从该小提琴中复制整个脚本并粘贴到您的页面中并在浏览器中进行测试。它会起作用的。 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');
            }
        }
});
于 2013-11-07T07:13:56.447 回答
1

该解决方案集成了页面切换。

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

于 2013-11-07T08:19:02.273 回答
1

更新：检查这个小提琴， 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>
于 2013-11-07T06:44:48.153 回答