2

検索結果の項目を上下矢印キーで選択したいのですが、

次のリンクはフォーカスされませんが、何が間違っていますか?

http://jsfiddle.net/JJDfL/1/でライブ

$('#hitbox').on('keyup','a', function(event) {
    //focus prev/next with arrows, enter and escape
    if (event.keyCode == 27) {
      $('#hitbox').slideUp(100);
      $('#searchbox').val('');
      $('#searchbox').focus();
    }
    if(event.keyCode == 40) {
      var focused = $(':focus');    
      focused.parent().next().focus();
      alert(focused.parent().next().html()); //returns '<a href="asdf">bb</a>'
    }
  });

アップデート：

今動作します：

 focused.parent().next().find('a').focus();

問題を解決しました。

http://jsfiddle.net/JJDfL/4/

4

1 に答える 1

1

編集：

いくつかの問題がありますが、フィドルを編集したのでうまくいくはずです: http://jsfiddle.net/JJDfL/6/

問題 1: 押したときに (最初のリンクを選択した後で) 正しい要素を選択していません。次の方法で修正します。

$(this).parent().next().find("a").focus();

<p> 要素内の <a> 要素を選択する .find("a") に注意してください。children("a") メソッドも使用できます。

問題 2: イベントの伝播を停止していません。これにより、最近フォーカスされたアイテムでもイベントがトリガーされます。次の方法で修正します。

event.stopPropagation();

また、関数が終了したときに戻る場合、クエリ変数は不要のようです。

于 2013-03-15T10:38:43.023 に答える