버그 : 호버가 링크 href, Internet Explorer를 변경 중입니다.

Question

여러 이미지가 포함 된 링크가 있습니다. 마우스를 가져 가면 간격이 설정되고 CSS 클래스가 추가되고 이미지가 반복됩니다. 마우스가 꺼지면 간격이 지워집니다. 아래 코드 : 인터넷 익스플로러 6,7,8 숫자의 문자열로 가져가에 링크 HREF 변경에 대한 몇 가지 이유로

jQuery('#flicker').hover(
    function() { 
     flicker = setInterval(function() { 
      if (jQuery('#flicker img.active').next('img').length > 0) { 
       jQuery('#flicker img.active').removeClass('active').next('img').addClass('active'); 
      } else { 
       jQuery('#flicker img').removeClass('active'); 
       jQuery('#flicker img:first-child').addClass('active'); 
      } 
     }, 200); 
    }, 
    function() { 
     clearInterval(flicker); 
    } 
); 

.

테스트 사례는 here을 참조하십시오. 도움이 크게 감사, 전에이 버그를 보지 못했어요!

감사합니다.

(또한 내가 당신이 복제 할 수없는 경우에, 나는 패러랠를 사용하여 Mac에서 테스트하고있어 알려 주시기 바랍니다.) 당신은 또한 당신이 간격 타이머 flicker를 저장하는 변수를 호출하기 때문에

Answer 1

그것은이다 요소의 id이고 변수를 선언하지 않았으므로 Horror of Implicit Globals에 속합니다. IE 및 일부 다른 브라우저에서 id 값은 window 개체 (값은 Element)의 속성이되고 결국 요소에 번호가 할당됩니다. IE는이 요소의 "기본"속성을 설정합니다. href입니다.

그냥 flicker 변수를 개인 상황을 만들고 선언

(function() { 
    var flicker = 0; 

    jQuery('#flicker').hover(
     function() { 
      flicker = setInterval(function() { 
       if (jQuery('#flicker img.active').next('img').length > 0) { 
        jQuery('#flicker img.active').removeClass('active').next('img').addClass('active'); 
        } else { 
        jQuery('#flicker img').removeClass('active'); 
        jQuery('#flicker img:first-child').addClass('active'); 
       } 
      }, 200); 
     }, 
     function() { 
      clearInterval(flicker); 
     } 
    ); 
})(); 

---

오프 주제 : 일부 다른 변화는 내가 권하고 싶습니다 :

• 당신이 전화를 때마다 jQuery 함수를 사용하면 상당히 많은 작업을 수행해야하므로 문서가 변경되지 않았을 때 동일한 선택자에 대해 반복적으로 호출해야합니다. 허약하다. 그것은 당신이 그것을 볼 때 당신의 마음에 붉은 깃발을 올려야하는 그 패턴 중 하나입니다. 호버 코드를 업데이트하여 결과를 저장하고 다시 사용하는 것이 좋습니다. (IE7의 경우 정확히 똑같은 빠른 브라우저가 아니므로 잘 실행됩니다.)
• 타이머를 지울 때 flicker 변수를 삭제하는 것이 좋습니다. 0은 유효한 타이머 핸들이 아니기 때문에 0은 좋은 값입니다. (그래서 위의 초기 값으로 사용했습니다.) 브라우저가 함수를 호출하면 이상한 상황이 발생하는 경우를 대비하여.