jQuery의ggleCLass() 메소드는 선택한 요소에서 하나 이상의 클래스를 추가하거나 제거하는 데 사용됩니다. 이 메서드는 하나 이상의 클래스 이름을 추가하거나 제거하는 사이를 전환합니다. 지정된 클래스 이름에 대해 각 요소를 확인합니다. 클래스명이 이미 설정되어 있으면 제거하고, 클래스명이 없으면 추가합니다.
이런 식으로 토글 효과가 생성됩니다. 또한 스위치 매개변수를 사용하여 추가만 또는 제거만 지정하도록 쉽게 지정할 수 있습니다.
통사론 :
$(selector).toggleClass(classname,function(index,currentclass),switch)
jQuery 토글클래스() 메소드의 매개변수
| 매개변수 | 설명 | ||
|---|---|---|---|
| 학급 이름 | 필수 매개변수입니다. 추가하거나 제거할 하나 이상의 클래스 이름을 지정합니다. 여러 클래스를 사용하는 경우 공백으로 구분하세요. | ||
| 함수(인덱스, 현재 클래스) | 선택적 매개변수입니다. 추가하거나 제거하려는 하나 이상의 클래스 이름을 지정합니다.| 색인: | 세트에 있는 요소의 인덱스 위치를 제공합니다.현재 수업: | 선택한 요소의 현재 클래스 이름을 제공합니다. |
| 스위치 | 선택적 매개변수이기도 합니다. 클래스를 추가해야 하는지(true) 제거해야 하는지(false) 여부를 지정하는 부울 값입니다. |
jQuery의 토글클래스() 메소드 예시
jQuery의 토글클래스() 메소드의 효과를 보여주는 예를 들어보겠습니다.
$(document).ready(function(){ $('button').click(function(){ $('p').toggleClass('main'); }); }); .main { font-size: 150%; color: red; } Toggle class 'main' for p elements <p>Hello! javatpoint.com</p> <p>This is popular tutorial website.</p> <p> <b>Note:</b> Click repeatedly on the button to see the toggle effect.</p> 지금 테스트해보세요 jQuery 토글클래스() 예제 2
toggleClass demo p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; } .blue { color: black; } .highlight { background: pink; } <p>www.javatpoint.com</p> <p>Java Tutorial</p> <p>SQL Tutorial</p> <p>Android Tutorial</p> <p>HTML Tutorial</p> <p>etc.</p> $( 'p' ).click(function() { $( this ).toggleClass( 'highlight' ); }); 지금 테스트해보세요 jQuery 토글클래스() 예제 3
toggleClass demo .wrap > div { float: left; width: 100px; margin: 1em 1em 0 0; padding=left: 3px; border: 1px solid #abc; } div.a { background-color: aqua; } div.b { background-color: burlywood; } div.c { background-color: cornsilk; } toggle toggle a toggle a b toggle a b c <a href="#">Reset</a> var cls = [ '', 'a', 'a b', 'a b c' ]; var divs = $( 'div.wrap' ).children(); var appendClass = function() { divs.append(function() 'none' ) + ' '; ); }; appendClass(); $( 'button' ).on( 'click', function() undefined; divs.toggleClass( tc ); appendClass(); ); $( 'a' ).on( 'click', function( event ) { event.preventDefault(); divs.empty().each(function( i ) { this.className = cls[ i ]; }); appendClass(); }); 지금 테스트해보세요