누군가이 코드를 설명해 주시겠습니까?

Question

안녕하세요 저는이 코드를 사용하여 패딩에 애니메이션이있는 링크 목록을 사용합니다. 그 패딩을 유지하고 원래 위치로 되돌아 가지 않도록 클릭했을 때. 내가 이해하지 못하는 것은 두 가지입니다. "if (!$(this)"코드의 일부분과 어떻게 링크를 찾을 수 있습니까? 정말 고마워!

$(function() { 
    $('#secondary_content_what_we_do li a').hover(function() { 
     if (!$(this).hasClass("current")) { 
      $(this).stop().animate({ 
       "paddingLeft": "10px" 
      }, 400).addClass('column_hover'); 
     } 
    }, function() { 
     if (!$(this).hasClass("current")) { 
      $(this).stop().animate({ 
       "paddingLeft": "0px" 
      }, 'slow').removeClass('column_hover'); 
     } 
    }); 

    $('#secondary_content_what_we_do a').click(function() { 
     $('a').removeClass('column_active').removeClass("current"); 
     $(this).addClass('column_active').addClass("current"); 
     $('#secondary_content_what_we_do li a').trigger('mouseleave'); 
     var url = $(this).attr('href'); 
     $('#loading_content').hide().load(url).fadeIn(1000); 
     return false; 
    }); 
}) 

업데이트 몇 가지 이유로 나는 주석을 쓸 수 없습니다. 지금은 이해하지만, 내 CSS에 클래스가 없으므로 그 라인이 어떻게 도움이되는지 잘 모릅니다.

Answer 1

이 문장은 :

if (!$(this).hasClass("current")) 

몇 가지 일을하고있다. this 변수 (이 경우 덮어 쓴 요소를 참조 함)를 jQuery 객체 ( $(...) 사용)에 래핑 한 다음 hasClass(...) 메서드를 호출 한 다음 결과에 노팅 ( !)을 지정합니다. 성명은 " 클래스가없는 이상 공중 선회 한 요소가있는 경우"질문의 두 번째 부분에 관해서는

현재 "다음 블록 내에서 코드를 실행"읽고, 당신이 참조하는 것 같아요

$('a').removeClass('column_active').removeClass("current"); 

어떻게 선택 앵커가 current의 클래스를 갖고 있지 않은 경우 작동이 라인. a 요소를 선택하면 current 클래스가 없으므로 아무런 효과가 없습니다 (요청한 내용이 아닌 경우 알려주십시오).

Answer 2

if (!$(this)은 완전한 표현식이 아닙니다. !은 무효화됩니다 (예 : $(this).hasClass("current")). !($(this).hasClass("current"))을 쓰면 똑같이 작동하고, 아마도 당신에게 더 명확해질 것입니다. 이 표현식은 "이 객체가 'current'클래스를 가지고 있지 않다면 의미한다.

클래스는 "현재"

$(this).addClass('column_active').addClass("current"); 

Answer 3

HTML의 DOM 요소를 동시에 둘 이상의 클래스를 가질 수있는 선으로 사물에 추가지고 있습니다. 그거 분명해?

Answer 4

$('#secondary_content_what_we_do li a') 

자체 ID와 secondary_content_what_we_do 요소의 자손 인 li의 후손 ALL a 요소를 선택한다. 따라서이 선택기는 배열 중 jQuery가 래핑 된 DOM 요소를 반환합니다.

함수 내부 this 키워드 이벤트 (click, hover이든)을 트리거 단일 DOM 요소를 지칭한다. 우리가 addClass 및 removeClass

처럼 jQuery를 기능에 액세스 할 수 있도록

$(this) 단순히 다시 jQuery를 객체로서 기본 DOM this 요소를 래핑 ...우리가 한 선택자와 일치하는 모든 요소 위에 마우스를 올려 때

$('#secondary_content_what_we_do li a').hover(function() { 
     if (!$(this).hasClass("current")) { 
      doSomething(); 
     } 
} 

는 essentialy, 우리가 공중 선회 특정 요소가되지 않는 경우 클래스 current합니다 (! 운영자가 hasClass 호출의 결과를 반전)이, 말하는 그런 다음 무언가를하십시오.