1

ページに複数の div が重なり合った画像のリストが表示されています。

クリックしたボタンに応じてdivが表示されます。

ナビゲーションキーを使用して画像を選択したい。

誰かが私に方向を示すことができますか.

これまでのコード - Fiddle Demo

ここでは、プロパティが「選択されている」画像が青色で表示されています。矢印キーをクリックすると、それぞれの画像が強調表示されます。

<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/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 に答える
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 に答える