Javascript 如何使上下箭头突出显示列表中的项目？（jQuery）

我有一堆同级

，我想让用户使用上下箭头在列表中上下移动并“突出显示”一个项目。在任何给定时刻，只应突出显示一项

最简单的方法是什么？

好的

var highlight = function(upOrDown){
    var highlighted = $("#daddyDiv > div.higlighted");

    if(highlighted[0] == null){
        //If nothing is highlighted, highlight the first child
        $("#daddyDiv > div:first").addClass("highlighted");
    } else {
        //Highlight the next thing
        if(upOrDown == "down" && highlighted.index() != $("#daddyDiv > div").length()){
            $("#daddyDiv > div").eq(highlighted.index()+1).addClass("highlighted");
            $("#daddyDiv > div.higlighted").removeClass("highlighted");
        } else if(upOrDown == "up" && highlighted.index() != 1){
            $("#daddyDiv > div").eq(highlighted.index()-1).addClass("highlighted");
            $("#daddyDiv > div.higlighted").removeClass("highlighted");
        }
    }
};

//Assuming you are using up/down buttons...

$("#upButton").click(function(){ highlight("up"); });
$("#downButton").click(function(){ highlight("down"); });

//Using the arrow keys...

$("body").keyup(function(e){
    if(e.keyCode == "40"){
        //Down key
        highlight("down");
    } else if(e.keyCode == "38"){
        //Up key
        highlight("down");
    }
});

这是我编的：

它基本上会在上/下移动时删除高亮显示的类，并将其添加到下一个/上一个。在最后一个代码之后下移/在第一个代码之后上移需要一些额外的代码

$('body').keydown(function(e) {
    if(e.keyCode === 40) {
        if($('.highlighted').next().length) {
            $('.highlighted').removeClass('highlighted')
            .next().addClass('highlighted');
        }
        else {
            $('.highlighted').removeClass('highlighted');
            var d = $('div');
            d.length = 1;
            d.addClass('highlighted');
        }
    }
    if(e.keyCode === 38) {
        if($('.highlighted').prev().length) {
            $('.highlighted').removeClass('highlighted')
            .prev().addClass('highlighted');
        }
        else {
            $('.highlighted').removeClass('highlighted');
            var d = $('div');
            d = $(d[d.length - 1]);
            d.addClass('highlighted');
        }
    }
});

---

查看中的工作示例，这里有一种不用id或类的方法。可以使用一个工作的JSFIDLE示例（请确保首先单击结果窗格）

javascript：

var $currentDiv = $("#myContainer").children().first();
$currentDiv.css("background", "red");

$("html").keyup( function(keyEvent) {
    if (keyEvent.keyCode == 40 ) {
        var $nextDiv;
        if ($currentDiv.next().size() == 0) {
            $nextDiv = $("#myContainer").children().first();
        }
        else {
            $nextDiv = $currentDiv.next();
        }
        $currentDiv.css("background", "");
        $nextDiv.css("background", "red");
        console.log($nextDiv);
        console.log($currentDiv);
        $currentDiv = $nextDiv;

    }
    else if (keyEvent.keyCode == 38) {
        var $previousDiv;
        if ($currentDiv.prev().size() == 0)
            $previousDiv = $("#myContainer").children().last();
        else {
            $previousDiv = $currentDiv.prev();
        }
        $currentDiv.css("background", "");
        $previousDiv.css("background", "red");
        $currentDiv = $previousDiv;
    }
});

html：

<div id="myContainer">
    <div> Div 1 </div>
    <div> Div 2 </div>
    <div> Div 3 </div>
    <div> Div 4 </div>
</div>

第一组
第2组
第3组
第4组

您的html是什么样子的？查看源html，而不是它的描述。“你已经尝试了什么，出了什么问题？”大卫问题很清楚，不需要提供html源代码。@Hussein:还有关于他已经尝试了什么，出了什么问题的部分。。？他的HTML是隐含的，没有指定。虽然描述相对清晰，但如果没有一些猜测，就无法准确再现。如果OP谈论的是使用箭头键，那么他们应该绑定到keyUp事件并检查该事件。要找出按下了哪个键。哇，做得很好。我真不敢相信有些答案会在这里持续多久。事实上，我无法在Chrome上完成这项工作。另外，在最后一个项目之后遍历回第一个项目怎么样？Chrome看起来不适合按键。只需将keypress更改为keyup<代码>$（文档）.keyup（函数（e）{我更新了答案。谢谢，但是，在选择了最后一个之后，向下移动会导致无法再选择它。

<div id="myContainer">
    <div> Div 1 </div>
    <div> Div 2 </div>
    <div> Div 3 </div>
    <div> Div 4 </div>
</div>