Методът jQuery toggleCLass() се използва за добавяне или премахване на един или повече класове от избраните елементи. Този метод превключва между добавяне и премахване на едно или повече имена на класове. Той проверява всеки елемент за посочените имена на класове. Ако името на класа вече е зададено, той премахва и ако името на класа липсва, той добавя.
По този начин се създава ефектът на превключване. Той също така ви улеснява да посочите само добавяне или премахване само чрез използване на параметър за превключване.
Синтаксис :
$(selector).toggleClass(classname,function(index,currentclass),switch)
Параметри на метода jQuery toggleClass().
| Параметър | Описание | ||
|---|---|---|---|
| име на клас | Това е задължителен параметър. Той определя едно или повече имена на класове за добавяне или премахване. Ако използвате няколко класа, разделете ги с интервал. | ||
| функция (индекс, текущ клас) | Това е незадължителен параметър. Той определя едно или повече имена на класове, които искате да добавите или премахнете.| Индекс: | Той осигурява позицията на индекса на елемента в набора.Текущ клас: | Той предоставя текущото име на клас на избрания елемент. |
| превключвател | Това също е незадължителен параметър. Това е булева стойност, която указва дали класът трябва да бъде добавен (true) или премахнат (false). |
Пример за метод jQuery toggleClass().
Нека вземем пример, за да демонстрираме ефекта от метода toggleClass() на 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 toggleClass() пример 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 toggleClass() пример 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(); }); Тествайте сега