▶ 토글 클래스 (toggleClass) 이벤트
toggleClass(class)
→ 이 메서드는 선택한 엘리먼트에 클래스가 이미 적용되어 있으면 클래스를 제거하고 그렇지 않으면
클래스를 적용한다.
$('선택자').toggleClass('CSS에 정의한 클래스 이름');
'CSS에 정의한 클래스 이름' 에는 선택한 엘리먼트에 적용하거나(아직 적용되어 있지 않으면)
제거할(이미 적용되어 있으면) 클래스이다.
예제를 통해서 알아보자.
예)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<title>JS Bin</title>
<style>
.effective{
background-color:yellow;
color:green;
}
</style>
<script>
$(document).ready(function(){
$('#btn').on('click', function(e){
$('.subject').toggleClass('effective');
});
})
</script>
</head>
<body>
<p class="subject"> 토글클래스 테스트입니다.</p>
<button id="btn">적용</button>
</body>
</html>
위 소스코드를 전체적으로 구동되는 것을 설명하자면
위 코드를 보면 <style></style> 정의 한 부분을 보면.
effective라는 클래스 스타일을 정의한 코드가 있고,
<body></body> 태그에 btn 아이디 값을 가진 버튼을 클릭 이벤트로 등록하여 클릭이 동작하게끔
한 후 클릭 할 때마다 토글이벤트 메서드를 실행한다.
중요한 부분은 버튼을 클릭할 때마다 토글이벤트를 실행하는 부분을 잘 보면
btn 클릭 이벤트를 보면 버튼이 클릭이 될 때마다
$('. subject').toggleClass('effective') 이 코드가 실행을 하는데 이 코드의 뜻은
$('. subject') 이 선택자의 태그에 effective라는 클래스명을 추가/삭제하는 뜻을 가진다.
버튼을 클릭시
effective 클래스가 추가가 되면
<style></style> 에 정의한 내용의 코드가 $('.subject') 선택자의 p 태그에 적용이 된다.
다시 한번 클릭을 하게 되면
effective 클래스가 삭제가 되어 다시 이전으로 돌아가게 된다.
아래 결과 화면을 봐 보자.
결과 화면을 보면 원래 p 태그의 subject 클래스가 하나밖에 없는데, 적용 버튼을 클릭을 하게 되면,
내가 미리 정의한 effective의 스타일의 CSS가 적용이 되고, p 태그의 클래스가 effective가 추가된
것을 확인할 수 있다.
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - 선택자 :eq() 인덱스 사용자 지정 선택기 (0) | 2022.03.07 |
|---|---|
| jQuery - 키보드 키 어떤 키가 눌렸는지 확인하는 방법 (0) | 2022.03.06 |
| jQuery - 버튼에 호버(hover) 효과 이벤트, 적용하기 (0) | 2022.03.06 |
| jQuery - 엘리먼트가 focus(포커스)를 얻고 잃을 때 이벤트 (0) | 2022.03.06 |
| jQuery - 마우스 이벤트 관련, 왼쪽/오른쪽 클릭 된 곳 알아내기 (0) | 2022.03.05 |