jQuery를 :이 아니요() 후 .addClass()와 .removeClass()

Question

나는 웹 사이트에 대한 탐색을 만들고있어이 같은 행동 버튼을 싶습니다

:

• 활성 버튼 40px 높은 되세요 다른 사람들보다.
• 활성 버튼이 아닌 경우 마우스를 올리면 커서가 10 픽셀 위로 이동합니다.
• 버튼을 클릭하면 모든 버튼에서 활성 클래스를 제거하고 모두 원래 위치로 이동하고 클릭 한 버튼에 활성 클래스를 추가하고 클릭 한 버튼을 40px 위로 이동합니다.

이 내 jQuery 코드입니다 :

$(document).ready(function(){ 
    $('#navigation a').not(".active") 
    .mouseover(function(){ 
      $(this).stop().animate(
        {top:"-10px"}, 
        {duration:200} 
      ) 
    }) 
    .mouseout(function(){ 
      $(this).stop().animate(
        {top:"0px"}, 
        {duration:200} 
      ) 
    }) 
    .click(function(){ 
      $('#navigation a.active').animate(
        {top:"0px"}, 
        {duration:200} 
      ) 
      $('#navigation a').removeClass("active"); 
      $(this).addClass("active"); 
      $(this).stop().animate(
        {top:"-40px"}, 
        {duration:200} 
      ) 
    }) 
}); 

모든 것이 작동하는 것 같다 및 클래스가 주어진 제대로 제거되고있다. 유일한 문제는 not() 메서드가 나중에 addClass()를 사용하여 클래스를 얻은 사람이 아니라 초기 활성 버튼을 계속 차단한다는 것입니다.

Answer 1

변경

$('#navigation a').not(".active") 
    .mouseover(function(){ 
     // ... 
    }).mouseout(function() { 
     // ... 
    }).click(function() { 
     // ... 
    }); 

event delegation를 사용 :

$('#navigation').on('mouseover', 'a:not(.active)', function(){ 
    // ... 
}).on('mouseout', 'a:not(.active)', function(){ 
    // ... 
}).on('click', 'a:not(.active)', function(){ 
    // ... 
}); 

이하를 :

$('#navigation').on({ 
    'mouseover': function(){ 
     // ... 
    }, 
    'mouseout': function(){ 
     // ... 
    }, 
    'click': function(){ 
     // ... 
    } 
}, 'a:not(.active)'); 

https://api.jquery.com/on/