[jQuery] toggleClass(), hasClass(), removeClass(), addClass()

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{width: 200px; height: 200px;}
.addSize{width: 300px; height: 300px;}
.onOffImg{display: none;}
</style>
<!-- cdn -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

	$(document).ready(function(){
		$("#btn").click(function(){
			$("img").toggleClass("onOffImg");
		});
		
		$("img").click(function(){
			if($(this).hasClass("addSize")){
				$(this).removeClass("addSize");
			} else{
				$(this).addClass("addSize");
			}
		})
	});

</script>
</head>
<body>

	<button id="btn">image on/off</button>
	
	<br>
	
	<img alt="img01" src="resources/image/img01.png" title="이미지 1번">
	<img alt="img02" src="resources/image/img02.png" title="이미지 2번">
	<img alt="img03" src="resources/image/img03.png" title="이미지 3번">
	

</body>
</html>

처음 실행되었을때는 모든 이미지에 class속성이 없습니다.

하지만 버튼을 누르게 되면 이미지가 사라지면서 class 속성이 생깁니다.

$("#btn").click(function(){
	$("img").toggleClass("onOffImg");
});

우선 버튼을 클릭하면 이런 함수가 실행이 됩니다.

toggleClass()라는 메서드로 인해 함수가 실행이 될때마다 class속성이 생겼다가 없어졌다가 합니다.

$("img").click(function(){
	if($(this).hasClass("addSize")){
		$(this).removeClass("addSize");
	} else{
		$(this).addClass("addSize");
	}
});

또 이 함수로 인해 이미지 자체를 클릭하게 되어도 클래스가 생겼다가 없어졌다가 합니다.

hasClass() 메서드로 해당 클래스가 있는지 없는지를 찾고 있다면 removeClass()메서드로 인해 해당 클래스 속성을 없애며 없다면 addClass()메서드로 해당 클래스 속성을 생기게 합니다.

css에서 클래스 선택자에 css를 주었기에 이미지 크기가 변하게 됩니다.

728x90

'JS 관련 > JQuery' 카테고리의 다른 글

[jQuery] prepend(), append() (0)	2022.02.23
[jQuery] replaceWith(), replaceAll() (0)	2022.02.22
[jQuery] 메뉴 숨기기 보이기( 이펙트 메서드 활용 ) (1)	2022.02.20
[jQuery] 이펙트 메서드( animate() ) (0)	2022.02.19
jQuery] 이펙트 메서드( slide, fade, animate ) (0)	2022.02.18

'JS 관련 > JQuery' 카테고리의 다른 글

티스토리툴바