JQuery нажатие клавиш перебирать каждый цикл? - PullRequest
Новая
       15

JQuery нажатие клавиш перебирать каждый цикл?

2 голосов
/ 02 января 2011

Эй, ребята, возможно, вопрос simpel, но я ничего не смог найти в Интернете.

У меня есть список с результатами поиска, и я хочу иметь возможность перемещаться по списку с помощью клавиш вверх и вниз.

    if (e.keyCode == 40) { //down
        //alert('down');
        $('#searchresults ul li').each(function() { 

        });
    }

    if (e.keyCode == 38) { //up
        //alert('up');
    }

    if (e.keyCode == 13) { //enter
        //alert('enter');
    }

результаты поиска выглядят так: 

<ul>
    <li class="matched"><a href="link1">link1</a></li>
    <li class="matched"><a href="link2">link2</a></li>
    <li class="matched"><a href="link3">link3</a></li>
</ul>

Поэтому я просто хочу, чтобы иметь возможность перемещаться по результатам поиска с помощью клавиш вверх и вниз.выбор текущего элемента должен, возможно, просто изменить цвет фона, и когда я нажимаю клавишу ввода, запускается связанный и сопоставленный элемент.

Есть идеи, как я могу перебрать результаты поиска?спасибо

edit: 

var pressedCount = 0;

if (e.keyCode == 40) { //down
    console.log(pressedCount);
    $('#searchresults ul li').index(pressedCount).addClass('selected');
    pressedCount++;
}

не работает, потому что я делаю что-то не так с index-методом.Однако переменная selectedCount увеличивается с каждым триггером сокращения стрелки.

Ответы [ 3 ]

6 голосов
/ 02 января 2011

Рабочая демонстрация: http://jsfiddle.net/zBjrS/1/

(сначала необходимо щелкнуть страницу, чтобы сфокусировать кадр).

1 голос
/ 02 января 2011

Не уверен, что мне действительно нравится идея перенять пользовательские клавиши со стрелками, особенно когда мы живем в мире, где страница вверх / вниз больше не присутствует на многих клавиатурах (ноутбуках). Многие пользователи используют стрелки для прокрутки.

Если вы настроили навигацию с помощью клавиатуры на своих результатах, просто установите фокус на первой ссылке, затем Tab опустится и Shift + tab поднимется.

Все эти функции уже встроены, вам просто нужно установить фокус на первый элемент

$('first_element_selector').focus();

0 голосов
/ 02 января 2011

как то так должно работать 

if (e.keyCode == 40) { //down
    $('#searchresults ul li').each(function() { 
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            $(this).next().addClass('selected');
            // use $(this).prev() for UP case
        }
    });
}

обратите внимание, что вам нужно было бы предварительно загрузить список с "выбранным" классом css или добавить некоторый код, чтобы применить выбранный элемент к первому элементу в списке, если ни один не был выбран

также вам понадобится код, чтобы проверить, что вы находитесь на последнем элементе в списке, в этом случае вы не захотите вызывать .next ()

jQuery следующий http://api.jquery.com/next/

jQuery prev http://api.jquery.com/prev/

jQuery hasClass http://api.jquery.com/hasClass/

jQuery removeClass http://api.jquery.com/removeClass/

...