jQuery onClick : 요소에 클래스를 추가하고 다른 클래스에서 요소를 제거하는 방법

Question

jQuery를 이해하기 위해서는 매우 기본적인 질문을해야 할 것입니다.

.team-member figure elememt를 클릭하면 'overlayOn'이라는 클래스가 추가되어 절대적으로 위치가 지정된 div에 rbga 색상이 추가됩니다 (어쨌든 나는 가로 누름).

이것은 요소의 클릭시 'overlayOn'클래스를 추가하고 다른 요소를 비활성화하도록하려는 경우를 제외하고는 완벽하게 작동합니다. 이제는 이것이 removeClass 또는 toggleClass의 간단한 사례 여야한다는 것을 알고 있지만 나에게있어이 일을 할 수는 없다. 짜증나는 것은 실제로 전에 이것을 한 것이지만 이번에는 내가 잘못 가고있는 것을 볼 수 없다.

jQuery(document).ready(function() { 
// Store the references outside the event handler 
var $window = jQuery(window); 
var $memberItem = ".team-member figure"; 
function checkWidth() { 
    var windowsize = $window.width(); 
    console.log(windowsize); 
    if (windowsize < 768) { 
     // if the window is smaller than 768px then allow click to see overlay 
     jQuery($memberItem).click(function(event) { 
       event.preventDefault(); 
       jQuery(this).toggleClass('overlayOn'); 
     }); 
    } 
} 

// Execute on load 
checkWidth(); 

// Bind event listener 
jQuery(window).resize(checkWidth); 

});

업데이트 : 아래 코드는 제안 된 것입니다. 요소를 클릭하면 다른 클래스가 클래스를 제거하지만, overlayOn 클래스가있는 요소를 클릭하여 제거하면 작동하지 않습니다 .

내 업데이트 된 코드는 다음과 같습니다.

jQuery(".team-member figure").click(function (event) { 
    var $window = jQuery(window); 
    var windowsize = $window.width(); 
    if (windowsize < 768) { 
     event.preventDefault(); 
     $('.team-member figure').removeClass('overlayOn'); 
     $(this).toggleClass('overlayOn'); 
    } 
}); 

Answer 1

당신은 클릭 이벤트 자체 내부의 window.width()를 확인할 수 있습니다. $('.overlayOn').removeClass('overlayOn');은 모든 요소에서 클래스 이름 overlayOn을 제거하는 데 도움이됩니다. 그럼 당신은 .addClass() 방법

jQuery(".team-member figure").click(function (event) { 
    var windowsize = $window.width(); 
    if (windowsize < 768) { 
     event.preventDefault(); 
     $('.overlayOn').removeClass('overlayOn'); 
     $(this).addClass('overlayOn'); 
    } 
}); 

편집 도와

jQuery(".team-member figure").click(function (event) { 
    var $window = jQuery(window); 
    var windowsize = $window.width(); 
    if (windowsize < 768) { 
     event.preventDefault(); 
     $('.overlayOn').not(this).removeClass('overlayOn'); 
     $(this).toggleClass('overlayOn'); 
    } 
}); 

Answer 2

당신은 모든 .team-member figure에서 클래스 overlayOn을 제거하는 .removeClass()을 사용할 수 있습니다 만 figure를 클릭이 클래스를 추가

jQuery($memberItem).click(function(event) { 
    event.preventDefault(); 
    jQuery('.team-member figure').removeClass('overlayOn'); 
    jQuery(this).toggleClass('overlayOn'); 
});