특정 효과를 수행할 때 동일한 노드의 특정 스타일이 지속적으로 전환될 수 있습니다. 즉, 인터레이스 색상 변경 효과와 같이 addClass와 RemoveClass 간의 상호 배타적 전환이 가능합니다.
jQuery는 이러한 상호 작용을 단순화하기 위해 전환 클래스 메서드를 제공합니다. 논리에서 토글클래스 메서드를 통해 클래스를 동적으로 추가 및 삭제합니다. 한 실행은 addClass와 동일하고 다른 실행은 RemoveClass
toggleClass() 메서드와 동일합니다. 일치하는 요소 집합의 각 요소에 대해 하나 이상의 스타일 클래스를 추가하거나 삭제합니다. 이 스타일 클래스가 존재하는지 또는 토글 속성의 값에 따라 달라집니다. 즉, 클래스가 존재하는 경우 삭제(추가)합니다(존재하지 않음)
토글클래스( className ): 일치하는 요소 세트의 각 요소를 토글하는 데 사용되는 하나 이상의(공백으로 구분) 스타일 클래스 이름
토글클래스( className, switch ): 스타일 추가 또는 제거 여부를 결정하는 데 사용되는 부울 값
ggleClass( [switch] ): 스타일 클래스 추가 또는 제거 여부를 결정하는 데 사용되는 부울 값
ggleClass( function(index , 클래스, 스위치) [, 스위치 ] ): 일치하는 요소 세트의 각 요소를 켜는 데 사용되는 스타일 클래스 이름을 반환하는 데 사용되는 함수입니다. 요소의 인덱스 위치와 요소의 이전 스타일 클래스를 매개변수로 받습니다
참고:
toggleClass는 상호 배타적인 논리입니다. 즉, 해당 요소에 지정된 클래스 이름이 있는지 여부를 판단하여 존재하면 삭제합니다. 존재하지 않으면 삭제합니다. 추가
토글클래스는 원래 클래스 이름을 유지하고 공백으로 구분하여 추가합니다.
예제를 작성해 보겠습니다
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隔行换色</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
body,table,td,{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.h {
background: #f3f3f3;
color: #000;
}
.c {
background: #ebebeb;
color: #000;
}
</style>
</head>
<body>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>php中文网</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文网</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文网</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文网</td>
<td>php.cn</td>
</tr>
<tr>
<td>php中文网</td>
<td>php.cn</td>
</tr>
</table>
</div>
<script type="text/javascript">
//给所有的tr元素加一个class="c"的样式
$("#table tr").toggleClass("c");
</script>
<script type="text/javascript">
//给所有的偶数tr元素切换class="c"的样式
//所有基数的样式保留，偶数的被删除
$("#table tr:odd").toggleClass("c");
</script>
<script type="text/javascript">
//第二个参数判断样式类是否应该被添加或删除
//true，那么这个样式类将被添加;
//false，那么这个样式类将被移除
//所有的奇数tr元素，应该都保留class="c"样式
$("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
</script>
</body>
</html>
다음 섹션