問(wèn)題描述

我似乎無(wú)法找到如何完成此任務(wù)的答案，但這是我多次看到的功能.本質(zhì)上，我是在呼應(yīng)一個(gè)列表，我想創(chuàng)建使用箭頭鍵/輸入突出顯示和選擇這些項(xiàng)目的能力.有人可以幫助我了解如何實(shí)現(xiàn)這一目標(biāo)嗎?我知道如何使用鍵碼(當(dāng)然)，只是不知道如何將其變成功能代碼以選擇列表中的項(xiàng)目...

I can't seem to find an answer to how to accomplish this, yet it's a feature I've seen several times. Essentially I'm echoing out a list and I would like to create the ability to highlight and select these items using arrow keys/enter. Can someone help give me an idea as to how I can accomplish this? I know how to use keycodes (of course), just not how to turn that into functioning code for selecting items on a list...

我在想也許我必須有某種隱藏的單選按鈕來(lái)將其標(biāo)記為選中或未選中...但即便如此我也不知道如何從一個(gè)單選按鈕跳到另一個(gè)單選按鈕在列表中.因此，如果有人可以幫我解決這個(gè)問(wèn)題，我將不勝感激.謝謝.

I was thinking maybe I'd have to have some sort of hidden radio button to mark it as selected or not... but even then I don't know how I would jump from one radio button to the other up and down the list. So if anyone could give me a hand with this I'd really appreciate it. Thank you.

推薦答案

由于您沒(méi)有真正解釋您遇到的問(wèn)題，我只是創(chuàng)建了一個(gè)通用解決方案.希望這會(huì)有所幫助:

Since you didn't really explain what you're having trouble with, I just created a general solution. Hopefully this helps:

var li = $('li');
var liSelected;
$(window).keydown(function(e) {
    if(e.which === 40) {
        if(liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
        } else {
            liSelected = li.eq(0).addClass('selected');
        }
    } else if(e.which === 38) {
        if(liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.last().addClass('selected');
            }
        } else {
            liSelected = li.last().addClass('selected');
        }
    }
});

JSFiddle:http://jsfiddle.net/Vtn5Y/

這篇關(guān)于使用箭頭鍵瀏覽列表?(JavaScript/JQ)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！