Jquery keydown은 한 번만 작동합니다.

Question

EDIT : = =로 바꾸면 해결되지만 완전히 해결되지는 않지만 $ currentSlide에 변경 사항을 추가하면 작동합니다! 예!

  $(document).keydown(function(e) { 
      if(e.keyCode == 39) 
       { 
        if($currentSlide == $slide1){ 
         slideShow(slide2); 
         $currentSlide = $slide2; 
        } 
        else if($currentSlide == $slide2){ 
         slideShow(slide3); 
         $currentSlide = $slide3; 
        } 
        else if($currentSlide == $slide3){ 
         slideShow(slide1); 
         $currentSlide = $slide1; 
        } 
       } 
     }) 

나는 대답을 검색했지만 내 질문에 맞는 것을 찾지 못했습니다. 나는 자바 스크립트에 대한 멍청한 놈이다.

저는 슬라이드 쇼로 작동하는 기능이 있습니다. (내 JQuery와 변수 앞에 $를 사용하여, 나는 자바 스크립트 변수의 여지가 너무 그래서 난 그냥 그들을 분리하는 데 사용합니다.)

var $currentSlide = "#slide1"; 
var $slide1 = "#slide1"; 
var $slide2 = "#slide2"; 
var $slide3 = "#slide3"; 

function slideShow($slide) { 
    if ($slide != $currentSlide){ 
     $($currentSlide).fadeOut(500); 
     $($slide).delay(500).fadeIn(500); 
     $currentSlide = $slide; 
    } 
}; 

을이 함수를 호출하기 위해, 나는 매개 변수와 함께 간단한 링크를 이용해 어떤 슬라이드가 활성 상태인지에 따라

onclick="slideShow(slide2)" 

그런 다음 키 누르기 (오른쪽)로 슬라이드를 변경하고 싶습니다. 링크를 사용하는 경우 그것은 완벽하게 작동하지만 키를 누를 때 매우 이상한 행동

$(document).keydown(function(e) { 
    if(e.keyCode == 39) { 
     if ($currentSlide = $slide1){ 
      slideShow(slide2); 
     } else if($currentSlide = $slide2) { 
      slideShow(slide3); 
     } else if($currentSlide = $slide3) { 
      slideShow(slide1); 
     } 
    } 
}) 

:이 키를 누를 때 내 코드입니다. 첫 번째 클릭은 매력처럼 작동하지만 더 이상 작동하지 않습니다. 세 번째 슬라이드를 클릭하기 위해 클릭하면 또 다른 클릭은 다음 슬라이드를 slide3 위에 올려 놓지 만 slide3은 사라지지 않습니다.

나는 여기에 내게 큰 실수가 있다는 것을 알고 있지만, 너무 초보자가되어서 고쳐야한다. 어떤 아이디어?

Answer 1

'=='대신 '='을 사용했기 때문에 if-else 조건이 항상 true입니다. 첫 번째 경우 조건이 사실 때문에 항상 슬라이드 2를 보여주고 그것이 한 번만

$(document).keydown(function(e) { 
    if(e.keyCode == 39) { 
     if ($currentSlide == $slide1){ 
      slideShow(slide2); 
     } else if($currentSlide == $slide2) { 
      slideShow(slide3); 
     } else if($currentSlide == $slide3) { 
      slideShow(slide1); 
     } 
    } 
}) 

하나를 사용하는 경우 두 번째 문제는, 어쩌면, 슬라이드 쇼의 시계에 의한 일한 당신에게 보인다. 다음/이전 버튼을 클릭하면 슬라이드 쇼의 시간을 재설정해야합니다.

Answer 2

는 두 가지 문제 당신은 당신의 if 조건에 할당 할

• 있다, 그래서 그들은 항상 참이다. 대신에 비교기 ===을 사용하십시오. onclick에서
• 가 $는

에서이 문제를 수정 옆에 누락되어 있기 때문에, 당신은 정의되지 않은 변수를 지정 속성, 당신의 슬라이드 요소, 개별없는 ID에 대한 클래스를 사용하는 것이 좋습니다 것입니다. 따라서 HTML에 id="slide1" 대신 class="slide"을 사용하고 모든 슬라이드에 적용하십시오. 동일한 클래스를 공유 할 수 있습니다.

그런 다음 나는 또한 슬라이드 요소의 모든 onclick 속성을 제거하고 $('.slide').click(...)으로 매우 간결하게 할 수있는 코드에서 클릭 처리기, 처리 할 0

부터 계산, 현재 슬라이드의 순서 번호를 저장 :

var currentSlideNo = 0; // zero-indexed 

function slideShow(slideNo) { 
    if(slideNo != currentSlideNo){ 
     $('.slide').get(currentSlideNo).fadeOut(500); 
     currentSlideNo = slideNo; 
     $('.slide').get(currentSlideNo).delay(500).fadeIn(500); 
    } 
}; 

$('.slide').click(function() { 
    slideShow((currentSlideNo + 1) % $('.slide').length); 
}); 

$(document).keydown(function(e) { 
    if (e.keyCode == 39) { 
     slideShow((currentSlideNo + 1) % $('.slide').length); 
    } 
});