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

Question

我有一堆

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

做到这一点最简单的方法是什么？

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/

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

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

Answer 4

这是一种不使用 ID 或类的方法。 此处提供了一个有效的 jsfiddle 示例（请确保先单击“结果”窗格）。

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>