0

$(this)セレクターを現在の要素にフォーカスさせるにはどうすればよいですか? このjsfiddleでは、指定された要素にのみ入るようにマウントしたため、Enterキーを押して「いる」ボタンをアクティブにすることはできません。http://jsfiddle.net/mathzarro/gd6Ep/1/

トリッキーな部分は次のとおりです。$("button:first").trigger('focus');

Ps。私は表現としてマウントしたと言った ！元のコーダーは Ian でした。ここにリンクがあります。@Ian に感謝します。 http://jsfiddle.net/Vtn5Y/

4

1 に答える 1

2

本当の問題はHazMatによって言及されました.あなたは間違った要素に焦点を合わせていました$("button:first").trigger('focus');.

keydownliSelected.trigger('focus');ハンドラーの最後で呼び出し、他の呼び出しを削除する$("button:first").trigger('focus');と、問題が解決します。

あなたはまた別の問題を抱えています

$("button:eq(1)").click(function () {
    // Why are you calling this? Remove this line
    $("button:eq(0)").trigger('click');     
    update($("span:last"));
});

これが実際の例です

また、jsfiddle は素晴らしいですが、コード関連のコードもここに投稿する必要があります。

改善提案

あなたが投稿したコードは、脆弱なクエリ、内部カップリングに苦しんでいます。つまり、HTML 構造の変更に対してあまり柔軟ではありません。より良い形になるように、コードを作り直しました。主な機能はこちら

  • タブしても壊れない
  • 必要な数のボタンに対応
  • 最初または最後の div のハードコーディングなし (スマート ラップ アラウンド)
  • n 番目にクリックされたボタンであるという事実に依存することで、すべて 1 か所で処理される出力 div のハードコーディングはありません。
  • 上/右で前進、下/左で後退
  • 自分で要素を追跡する必要はありません。それがdocument.activeElementの目的です
  • コードの各セクションは分離されています
    • 選択したボタンにクラスを追加します (CSS のみ) (したがって、「選択した」クラスをボタンに追加する必要はありません。
    • 出力の更新
    • 次のボタンにフォーカスを設定する

これがコードです

var buttons =  $('button');
var spans = $('span');

// Update the span when button is clicked
buttons.click(function(e){
    var span = $(spans[Array.prototype.indexOf.call(buttons, document.activeElement)]);
    span.text(parseInt(span.text(), 10) + 1);
});

// Handle the navigation, set focus on the next element
$(window).keydown(function(e){
    var isLeft = e.which === 38 || e.which === 37, 
        isRight = e.which === 40 || e.which === 39;
    if(isLeft || isRight){
        var currentButtonIndex =  Array.prototype.indexOf.call(buttons, document.activeElement);
        var nextButtonIndex;
        if (currentButtonIndex === -1) {
            nextButtonIndex = 0;
        } else {
            var toAdd = isLeft ? -1 : 1;
            nextButtonIndex = (currentButtonIndex + toAdd + buttons.length) % buttons.length;
        }
        buttons[nextButtonIndex].focus();
    }
});
于 2013-03-28T18:14:44.783 に答える