如何使用jQuery使上下箭头在列表中高亮显示项目？

Question

我有一堆<DIV>兄弟节点，我想让用户使用向上和向下箭头在列表中上下移动并“突出显示”项目。任何时候只应突出显示一个项目。

最简单的方法是什么？

- dan

---

你的HTML长什么样子？是查看源代码后的HTML，而不是对它的描述。你尝试过什么，并且出了什么问题？ - David Thomas

@david 这个问题非常清晰，不需要提供HTML源代码。 - Hussein

@Hussein：关于他已经尝试过什么以及出了什么问题的部分呢？他的HTML是暗示的，没有具体说明。虽然描述相对清晰，但在没有一些猜测的情况下，它并不完全可重现。 - David Thomas

Answer 1

$(document).keyup(function(e) {
    var $hlight = $('div.hlight'), $div = $('div');
    if (e.keyCode == 40) {
        $hlight.removeClass('hlight').next().addClass('hlight');
        if ($hlight.next().length == 0) {
            $div.eq(0).addClass('hlight')
        }
    } else if (e.keyCode === 38) {
        $hlight.removeClass('hlight').prev().addClass('hlight');
        if ($hlight.prev().length == 0) {
            $div.eq(-1).addClass('hlight')
        }
    }
})

请查看 http://jsfiddle.net/wMdML/8/ 上的示例代码。

- Hussein

---

哇，做得好。我简直不敢相信这里有些答案有多长。 - Pinkie

实际上在 Chrome 上无法使其工作。另外，在遍历到最后一个项目后返回到第一个项目怎么办？ - pimvdb

Chrome似乎不太适合使用keypress。只需将keypress更改为keyup即可。$(document).keyup(function(e) {我已更新答案。 - Hussein

谢谢，但是仍然存在问题：在最后一个被选择之后，向下移动会导致它无法再次被选择。 - pimvdb

Answer 2

好的...

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");
    }
});

- mattsven

---

如果OP在谈论使用箭头键，则应绑定到keyUp事件并检查event.which以找出按下了哪个键。 - Blair McMillan

Answer 3

我编写了这个程序：http://jsfiddle.net/JPy76/。

它的基本功能是在向上或向下移动时删除高亮类，并将其添加到下一个/上一个元素。但是，在移动到最后一个元素之后向下移动或在第一个元素之前向上移动时，需要一些额外的代码来实现。

$('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');
        }
    }
});

- pimvdb

Answer 4

这是一种不使用ID或类的方法。可以实现它。这里提供了一个工作的jsfiddle示例here（请确保首先单击结果窗格）。

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>

- Adam Prax