4

キーボードの矢印キーを押して div 要素のグリッドをナビゲートし、Enter キーを押して選択した div を「クリック」する方法はありますか? 少なくとも何とかしてこれを機能させようとする必要があることはわかっていますが、これを実現する方法や、それが可能かどうかについてはまったくわかりません。

マウスを使用しない場合、以下が無効になることを認識しています。特定の div にある種の「フォーカス」を表示するにはどうすればよいですか?

.show:hover{
    width:94px;
    height:94px;
    border:3px solid black;
}

.lock{
    pointer-events:none;
}

どこから始めるべきかのヒントはありますか？私のゲームはこちら: http://jsfiddle.net/94jerdaw/WXEes/

編集：

現在の位置から「上」に移動して、divフィールドをそのままナビゲートすることは可能ですか、それとも上/下/左/に移動する必要があるすべてのdivを伴う起点として、すべてのdivをケースにする必要があります正しいイベント？

4

2 に答える 2

8

あなたの質問がまだあなたにとって興味深いものであることを願っています。私は少し時間があり、いつも自分の記憶ゲームを持ちたいと思っていました. だから私はあなたの望む関数の構築を始めました。完全なコードについてはFiddleを参照してください。フィドル フレームのため、ゲームを 1 回クリックする必要があります。

編集:申し訳ありませんが、プラグインの独自の基本設定の 1 つをフォークしたため、スクリプトにゴミコードが含まれています。後で削除します。

まだ完成していませんが、今日完成させます。後でいくつかのオプションを追加したいので、プラグインとしてビルドしました。しかし、キーの動きの考え方は明確でなければなりません。

位置を見つけるためにMap-Objectを作成しました（配列を使用することもできますが、簡単だと思います）。

ここにすべてを投稿するにはコードが多すぎるため、ここにスニペットを示します。

$(window).keydown(function (e) {
    //Initial set first card as selected
    var actCard, nextCard;

    if ($('.cardset').find('.selected').length < 1) {
        $('#card1').addClass('selected');
    } else {
        switch (e.which) {
        case 37: // left
            $('.cardset').find('.selected').cardMoveHorizont('prev', cardMap);
            break;

        case 38: // up
            $('.cardset').find('.selected').cardMoveHorizont('up', cardMap);
            break;

        case 39: // right
            $('.cardset').find('.selected').cardMoveHorizont('next', cardMap);
            break;

        case 40: // down
            $('.cardset').find('.selected').cardMoveHorizont('down', cardMap);
            break;

        default:
            return; // exit this handler for other keys
        }
        e.preventDefault();
    }
});
于 2013-03-25T13:07:12.043 に答える
0

矢印キーとEnterのイベントリスナーをバインドする必要があります.JS / jQから簡単に実行できます

1 分 google: JS/jQuery で矢印キーをバインドする

于 2013-03-24T20:39:00.643 に答える