Question

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

如果没有选择菜单项，则选择类“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");
    }
});

Answer 1

您在HTML中的每个集合中都选择了一个元素 - 当您按下N时，您希望这些元素的行为如何？如果您想允许每组选择一个：

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

根据需要更新以处理多个组。或者，如果每页选择一个：

Another JSFiddle Demo

KeyBoard导航

1 个答案: