Question

我有一个输入字段和一个包含四个操作系统的div。当光标在输入字段中并按下向下箭头时，按下时它应该在每个OS div中循环。问题是当你到达最后一个div时，按下它，它应该返回到顶部的第一个div，但是，它似乎在第一个键盘按下时“跳过”到一个不存在的div，但是如果按下它第二次，它应该回到第一个div。如何让它不“跳过”并从列表中的最后一个div按下直接转到列表中的第一个div？关于如何使其正常工作的任何想法？

这是HTML：

 <input id="system" value="" />
 <div id="system-drop">
    <div class="os active">Mac</div>
    <div class="os">Windows</div>
    <div class="os">Linux</div>
    <div class="os">Other</div>
 </div>

这是jQuery：

$("#system").live('keyup',function(e){        
var curr = $('#system-drop').find('.active');

if(e.keyCode == 40 || e.charCode == 40){

    if(curr.length){
            $('.os.active').removeClass('active');
            $(curr).next().addClass('active');
    } else{
        $('#system-drop div:first-child').addClass('active');
    }

}

});

这是小提琴： http://jsfiddle.net/TF6Rb/771/

Answer 1

在curr.length之前cur.next().length = 0不为零。这意味着，当光标位于最后一个div时，cur.length仍为1，但没有cur.next()。

修改了jsFiddle here

如下所示更改您的状况，它应该有效，

    var nextActive = $(curr).next();
    $('.os.active').removeClass('active');

    if(nextActive .length){
        nextActive.addClass('active');
    } else{
        $('#system-drop div:first-child').addClass('active');
    }

键盘导航从输入字段跳过添加类

1 个答案: