목차
toggleClass() 예제 - p요소에 hz 클래스 추가/제거 토글 toggleClass() 정의 toggleClass() 구문 toggleClass() 예제 - 클래스명 추가/제거 토글 toggleClass() 예제 - 함수로 클래스명 추가/제거 토글 toggleClass() 예제 - switch 매개변수
toggleClass() 예제 - p요소에 hz 클래스 추가/제거 토글
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("hz");
});
});
</script>
<style>
.hz {
font-size: 150%;
color: red;
}
</style>
<button>클릭</button>
<p>홈짱닷컴 Homzzang.com</p>
<p>홈페이지 제작관리 강의</p>
결과보기
toggleClass() 정의
선택요소에 하나 이상의 클래스명 추가/제거 상호전환.
1.
각 요소가 지정 클래스명 갖고 있는지 체크한 후,
만약 있으면 지정 클래스명 제거함. 없으면 추가.
2.
switch 매개변수 통해서 제거만 또는 추가만 가능.
PS. toggleClass() 의미.
$(selector ).click(function(){
$(this).toggleClass("hz");
});
※ 위 소스는 아래 소스와 의미 동일
$(selector ).click(function(){
if($(this).hasClass("hz")){
$(this).removeClass("hz");
}else{
$(this).addClass("hz");
}
});
toggleClass() 구문
$(selector ).toggleClass(classname ,function(index,currentclass ),switch )
[매개변수]
classname
필수. 추가/제거 할 1개 이상의 클래스명 지정.
※ 여러 클래스명 지정하려면, '공백'으로 구분.
※ 클래스명 입력 시, 앞에 마침표( . ) 안 붙임. (예) hz (O), .hz (X)
function( index,currentclass )
선택. 추가/제거 할 클래스명을 반환하는 함수 지정.
index
요소 셋에서 요소의 색인번호 반환.
currentclass
선택요소의 현재 클래스명 반환.
switch
선택. 클래스를 오직 추가만 할지, 아니면 제거만 할지 지정.
true : 추가만 함.
false : 제거만 함.
toggleClass() 예제 - 클래스명 추가/제거 토글
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("hz");
});
});
</script>
<style>
.hz {
font-size: 150%;
color: red;
}
</style>
<button>클릭</button>
<p>홈짱닷컴 Homzzang.com</p>
<p class="hz">홈페이지 제작관리 강의</p>
결과보기
toggleClass() 예제 - 함수로 클래스명 추가/제거 토글
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").toggleClass(function(n){
return "hz" + n;
});
});
});
</script>
<style>
.hz1, .hz3 {
color: red;
}
.hz0, .hz2 {
color: blue;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<button>클릭</button>
결과보기
PS. n은 0부터 시작.
toggleClass() 예제 - switch 매개변수
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("p").toggleClass("hz",true); // 추가만
});
$("#remove").click(function(){
$("p").toggleClass("hz",false); // 제거만.
});
});
</script>
<style>
.hz {
font-size: 120%;
color: red;
}
</style>
<p>홈짱닷컴 Homzzang.com</p>
<p class="hz">그누보드 영카트 강의</p>
<button id="add">hz 클래스 추가</button>
<button id="remove">hz 클래스 제거</button>
결과보기
