0

当用户按下键盘上的键时，我试图在菜单上显示导航。

如果未选择菜单项，则选择“row”类的第一个实例，如果存在 row-focus，则删除当前焦点并使用“row-focus”类更新行的下一个实例。

我的 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”时，我想循环使用“row”类的元素。我可以使用 .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

You have an element selected in each set in your HTML- how do you expect those to behave when N is pressed? If you want to allow one selection per group:

$(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 Demo

Update that to handle multiple groups however you want. Or if it's one selection per page:

Another JSFiddle Demo

于 2013-08-13T04:11:58.300 回答