다른 링크를 클릭하면 ID에서 클래스 제거

Question

jQuery 문제에 대한 해결책을 찾기 위해 노력했습니다. 2 개의 div와 각각의 링크가있는 상위 컨테이너가 있습니다. div 중 하나에서 링크를 클릭하면 부모 컨테이너에 클래스가 추가됩니다 (배경을 변경하기 위해). 다른 링크를 클릭하면 다른 링크의 클릭에서 이미 클래스가 추가되었는지 확인하고 싶습니다.

어떻게 될까요? 첫 번째 링크를 클릭하면 클래스 inside-office이 추가됩니다. 그런 다음 두 번째 링크를 클릭하면 첫 번째 링크를 제거하지 않고 추가됩니다.

$("a.in-office").click(function() { 
    if($('#fullwrap').hasClass('outside-office')) { 
    $(this).removeClass('outside-office'); 
    } 
    $('#top_barwrap').parent().addClass('inside-office'); 
    $('.blockcase').fadeIn(); 
    $('.lead-title, .subtitle').fadeOut(); 
    $('#top_barwrap').animate({ height:'150px' }, { queue:false, duration: 500 }); 
}); 

$("a.out-office").click(function() { 
    if($('#fullwrap').hasClass('inside-office')) { 
    $(this).removeClass('inside-office'); 
    } 
    $('#top_barwrap').parent().addClass('outside-office'); 
    $('.blockcase').fadeIn(); 
    $('.lead-title, .subtitle').fadeOut(); 
    $('#top_barwrap').animate({ height:'150px' }, { queue:false, duration: 500 }); 
}); 

Answer 1

사용 toggleClass :

여기에 지금까지 성공하지 못했다 내가 가지고있는 코드입니다. 클래스가 있으면 클래스를 제거하고, 그렇지 않으면 클래스를 제거합니다. 클래스 중 하나가 이미 존재하는 경우에, 당신은

$(this).toggleClass('outside-office inside-office'); 

Answer 2

변경 $를 사용하여 두 클래스 사이에

$(this).toggleClass('outside-office'); 

전환 할 수 있습니다 (이) $은 ('#의 fullwrap')이 확인되는대로에 ID가 "fullwrap"인 요소의 클래스입니다.

Answer 3

이것은 필요한 것입니다. 설명 : $ (this)는 절대로 $ ('fullwrap')을 참조하지 않습니다. $ (this)는 실제로 $ ('a.in-office') 또는 $ ('a.out-office')를 나타냅니다.

올바른 코드 :..

$("a.in-office").click(function() { 
    var $this = $('#fullwrap'); 
    if($this.hasClass('outside-office')) { 
     $this.removeClass('outside-office'); 
    } 
    $('#top_barwrap').parent().addClass('inside-office'); 
    $('.blockcase').fadeIn(); 
    $('.lead-title, .subtitle').fadeOut(); 
    $('#top_barwrap').animate({ height:'150px' }, { queue:false, duration: 500 }); 
}); 

$("a.out-office").click(function() { 
    var $this = $('#fullwrap'); 
    if($this.hasClass('inside-office')) { 
     $this.removeClass('inside-office'); 
    } 
    $('#top_barwrap').parent().addClass('outside-office'); 
    $('.blockcase').fadeIn(); 
    $('.lead-title, .subtitle').fadeOut(); 
    $('#top_barwrap').animate({ height:'150px' }, { queue:false, duration: 500 }); 
});