이 jquery 키보드 탐색을 조정하여 다른 태그와 키보드 기능을 허용하려면 어떻게해야합니까?

Question

이미지가 페이지 아래로 세로로 실행되는 간단한 사이트를 만드는 중입니다. 키보드의 화살표 키를 사용하여 이미지 사이를 부드럽게 스크롤하고 싶습니다. 이 포럼의 도움을 받아 다음 제안을 받았습니다 (사실, 작동합니다).

예 : http://jsfiddle.net/aVvQF/5/

질문 : How can one smooth scroll up and down between objects on a page with arrow keys?

는 그러나, 나는 추가 기능의 비트가 필요합니다. 이 설정은 모든 키보드 기능의 기본 동작을 방지합니다. 왼쪽 및 오른쪽 화살표 키의 기본 동작 만 변경하면됩니다. 나는 위아래 대신에 왼쪽과 오른쪽을 사용하기로 결정했기 때문에 표준 위아래 화살표 탐색과 페이지 위 아래로 페이지가 영향을받지 않습니다. 왼쪽 화살표와 오른쪽 화살표를 제외한 모든 키를 사용할 수 있도록 코드가 어떻게 변경 될 수 있습니까?

또한이 설정은 'img'태그 사이에 다른 태그가없는 경우에만 작동하는 것으로 보입니다. 그러나 이미지 사이 또는 주변에 링크, 텍스트 및 줄 바꿈을 배치 할 수 있어야합니다. 이를 위해 코드를 어떻게 조정할 수 있습니까? 또는 이미지와 필수 텍스트를 넣고 페이지를 실행하는 'div'클래스에 링크를 추가 한 다음 (지금은 모두 'div'에 있음) 키보드 탐색을 'div' ?

감사합니다.

Answer 1

당신은 함수의 시작 부분에 왼쪽 및 오른쪽 화살표 키를 제외한 모든 키를 수 아래 같은 것을해야한다 ->

var keyCode = e.keyCode; 

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

나는 당신의 HTML 및 스크립트 수정 비트를 작동 시키십시오. 내 접근보기 jsFiddle here

next()와 next ([selector])는 다르게 작동합니다. 전자는 다음 형제를 가져오고 나머지는 먼저 일치하는 목록 ($ ('. 활성')을 얻고 그 다음으로 일치하는 요소를 선택합니다 (0).

그 다음 p.selected를 가져 오는 것입니다 같은 예는,

<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'매칭 찾을 $("p.selected.active")을 통해 jQuery를 반복처럼 나에게 보이는 않습니다 공백으로 돌아갑니다.

나는 사용했다.다음()와 나는 그것이

도움이되기를 바랍니다 절은 형제의 다음 IMG 태그를 찾으려면 어디,

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

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

을 추가 편집 :

확인 here.

1. keydown의 스팸을 방지하려면 isAnimating 플래그를 추가하십시오.
2. 수정 된 CSS .active img{ border: 2px dotted red; }.
3. html이 약간 변경되었습니다.

Answer 2

How can the code change to allow the expected use of all keys except the left and right arrows?

당신이 왼쪽/오른쪽 키

How can the code be adjusted to allow for this?

의 일치 당신은 컨테이너 사업부와 데이터의 각 세트를 둘러싸고 div를 찾기 위해 코드를 변경 할 수 있어야한다있을 때 만 e.preventDefault(); 전화 이미지 대신.

예 : http://jsfiddle.net/KnKC9/1/