0

ユーザーがキーボードのキーを押すと、メニューにナビゲーションが表示されるようにしようとしています。

メニュー項目が選択されていない場合は、クラス「行」の最初のインスタンスを選択します。行フォーカスが存在する場合は、現在のフォーカスを削除し、行の次のインスタンスをクラス「行フォーカス」で更新します。

私のhtmlはフォーマットされています：

<div id="group_1386" idgroup="1386" class="group">
  <div class="row feed-group-name row-focus" idgroup="1386"> <span class="text">Winter Is Coming</span></div>
  <div class="thetitles ui-sortable">
    <div id="feed_26451" class="row t-row"><span class="text">#sgluminis - Twitter Search</span> </div>
    <div id="feed_26453" class="row t-row"><span class="text">Twitter / MikeMagician</span> </div>
  </div>
</div>
<div id="group_1387" idgroup="1387" class="group">
  <div class="row feed-group-name" idgroup="1386"> <span class="text">Summer Is Coming</span></div>
  <div class="thetitles ui-sortable">
    <div id="feed_26451" class="row t-row"><span class="text">Summer Search</span> </div>
    <div id="feed_26453" class="row t-row"><span class="text">Hot Beaches</span> </div>
  </div>
</div>

誰かがキーボードの「n」をクリックすると、「行」のクラスを持つ要素を循環したいと思います。.find() を使用して次のクラスを選択できますが、複数の行が返されます。.first() は常に最初ではないため、使用できません。クラス行の次のインスタンスが兄弟、子である場合がありますが、常にクラス「行」を持っている場合、どうすればそれを見つけることができますか。

$(document).on("keypress", null, "n", function(){
    if($(".row-focus").length){
        var curr = $("#ind-menu").find(".row-focus");
        var nextActive = $(curr).siblings().next(".row");
        $(curr).removeClass("row-focus");
        $(nextActive).addClass("row-focus");


        //selected.next().find(".row").next().addClass("row-focus");


    } else {
        //alert("nothing selected");
        $("#ind-feeds .row:first").addClass("row-focus");
    }
});
4

1 に答える 1

1

HTML の各セットで選択された要素があります。N が押されたときにそれらがどのように動作すると予想しますか? グループごとに 1 つの選択を許可する場合:

$(document).on("keypress", null, "n", function(){
    if($(".row-focus").length){
        var curr = $("#group_1386").find(".row-focus");
        var allActive = $(curr).parents(".group").find(".row");
        var currIndex = allActive.index(curr);
        var nextActive = allActive.eq(currIndex == allActive.size() - 1 ? 0 : currIndex + 1);

        $(curr).removeClass("row-focus");
        $(nextActive).addClass("row-focus");

    } else {
        $("#group_1386 .row:first").addClass("row-focus");
    }
});

JSFiddleデモ

必要に応じて複数のグループを処理するように更新します。または、ページごとに 1 つの選択の場合:

別の JSFiddle デモ

于 2013-08-13T04:11:58.300 に答える