jQuery를 토글() - 추가 활성 요소

Question

현재에 대한 클래스를 제거, 나는이 조각 사용하고 있습니다 :

$('.element-block').click(function(){ 
    $(this).siblings(".key-element").toggle(); 

    $('.background-area').removeClass("active_bg"); 
    $(this).parent('.background-area').addClass("active_bg"); 
}); 

내가 DIV 요소의 목록을 가지고 있습니다. 이 블록에서 .element-block을 클릭하면 기능 토글()이 필요 영역을 표시합니다. 다시 클릭하면 토글 토글이 표시되고이 영역에 배경색이 추가됩니다.

예 : A .block-element을 클릭합니다. 데이터가 나타나고 + 배경색이 변경되었습니다. 그런 다음 B .block-element을 클릭합니다 - 데이터가 나타나고 + 배경색이 변경되었습니다. 시원한.

하지만은 A .block-element 클릭하면 - 데이터가 나타 + 배경 색상을 변경하고 나서이 (가) .block-element 다시 클릭하면된다 - 데이터가 숨겨집니다 만, 배경 색상 이을 변경되지 않습니다.

이 문제를 해결하는 방법은 무엇입니까?

Answer 1

항상 클래스를 추가하기 때문입니다.

이

var $active_bg = $('.background-area.active_bg').removeClass("active_bg"); 
var $bg = $(this).parent('.background-area'); 

// Only add the class if the current background didn't have the class 
if ($bg[0] !== $active_bg[0]) { 
    $bg.addClass("active_bg"); 
} 

위의 코드는 하나 개의 .background-area 요소는 "활성"할 수 있습니다 : 당신은 단지 그것을 제거하거나뿐만 아니라 추가할지 여부를 사전에 확인할 수 있습니다. 코드가 여러 개인 경우 코드를 다음과 같이 단순화 할 수 있습니다.

$(this).parent('.background-area').toggleClass("active_bg");