Как можно настроить навигацию с помощью jquery-клавиатуры, чтобы использовать другие теги и функции клавиатуры?

Question

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

Пример: http://jsfiddle.net/aVvQF/5/

Вопрос: Как можно плавно перемещаться между объектами на странице с помощью клавиш со стрелками?

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

Кроме того, кажется, что эта настройка работает, только если между тегами 'img' нет других тегов. Однако мне нужно иметь возможность размещать ссылки, текст и разрывы строк между изображениями или вокруг них. Как можно изменить код, чтобы учесть это? Или, в качестве альтернативы, лучше бы было поместить изображение, необходимый текст и ссылки каждый в классы 'div', бегущие по странице (сейчас это все в одном 'div'), а затем переключать навигацию клавиатуры между "div's"

Спасибо.

Answer 1

Вы должны сделать что-то вроде ниже, чтобы разрешить все другие клавиши, кроме клавиш со стрелками влево и вправо в начале вашей функции ->

var keyCode = e.keyCode;

//return if it is not left/right arrow key
if (keyCode != 39 && keyCode != 37) {
    return;
}

Я изменил ваш HTML и скрипт немного, чтобы он работал.Смотрите мой подход jsFiddle здесь

Next () и next ([селектор]) работают по-разному.Прежний next просто получает следующего родного брата, в противном случае последний пытается сначала получить список соответствия ($ ('. Active') в вашем случае и выбирает следующий соответствующий элемент (который равен 0).

Например,

 <p class="selected active">Hello Again</p>
 <span class="log" >Test</span>
 <p class="selected">Hello Again</p>
 <div><span>And Again</span></div>

И этот $("p.selected.active").next('p.selected') может выглядеть так, как будто он собирается выбрать следующий p.selected, но это не так. Мне кажется, что jQuery перебирает $("p.selected.active"), чтобы найтисоответствие 'p.selected', которое будет возвращать пустое значение.

Я использовал .next () и добавил предложение where, чтобы найти следующий тег img в братьях и сестрах,

 $targetElement = $('.active').next();

 while ($targetElement.length != 0 && $targetElement.hasClass('img') == false) {
       $targetElement = $targetElement.next();
 } 

Надеюсьэто помогает

Редактировать:

Проверить здесь .

1. Добавить флаг isAnimating, чтобы избежать спама при отключении клавиатуры.
2. Модифицированный CSS .active img{ border: 2px dotted red; }.
3. Немного изменил HTML.

Answer 2

Как изменить код, чтобы разрешить ожидаемое использование всех клавиш, кроме стрелок влево и вправо?

Звоните e.preventDefault(); только при совпадении левой / правой клавиш

Как можно изменить код, чтобы учесть это?

Вы должны быть в состоянии окружить каждый набор данных контейнером div и изменить код, чтобы искать div вместо изображений.

Пример: http://jsfiddle.net/KnKC9/1/