Содержание:
.toggleClass( className )Возвращает: jQuery
Описание: Добавляет или удаляет один или несколько классов из каждого элемента в наборе сопоставленных элементов, в зависимости от наличия класса или значения аргумента состояния.
-
версия добавлена: 1.0.toggleClass( className )
- classNameТип: СтрокаОдин или несколько классов (разделенных пробелами), которые нужно переключать для каждого элемента в наборе сопоставленных элементов.
-
-
версия добавлена: 1.3.toggleClass( className, state )
-
версия добавлена: 3.3.toggleClass( classNames )
- classNamesТип: МассивМассив классов, которые нужно переключать для каждого элемента в наборе сопоставленных элементов.
-
-
версия добавлена: 3.3.toggleClass( classNames, state )
-
версия добавлена: 1.4.toggleClass( function [, state ] )
- functionФункция, возвращающая один или несколько классов, разделенных пробелами, для переключения в атрибуте class каждого элемента в наборе сопоставленных элементов. Принимает в качестве аргументов порядковый номер элемента в наборе, старое значение класса и состояние.
- stateТип: БулевоБулево значение для определения того, следует ли добавить или удалить класс.
-
-
версия добавлена: 3.3.toggleClass( function [, state ] )
- functionФункция, возвращающая один или несколько классов, разделенных пробелами, или массив классов для переключения в атрибуте class каждого элемента в наборе сопоставленных элементов. Принимает в качестве аргументов порядковый номер элемента в наборе, старое значение класса и состояние.
- stateТип: БулевоБулево значение для определения того, следует ли добавить или удалить класс.
-
Этот метод принимает один или несколько классов в качестве параметра. В первой версии, если элемент в наборе сопоставленных элементов уже имеет класс, он удаляется; если элемент класса не имеет, он добавляется. Например, мы можем применить .toggleClass() к простому <div>.
<div class="tumble">Some text.</div>
В первый раз, когда мы применяем $( "div.tumble" ).toggleClass( "bounce" ), мы получаем следующее:
<div class="tumble bounce">Some text.</div>
Во второй раз, когда мы применяем $( "div.tumble" ).toggleClass( "bounce" ), класс <div> возвращается к единственному значению tumble.
<div class="tumble">Some text.</div>
Применение .toggleClass( "bounce spin" ) к тому же <div> элементу чередует значения <div class="tumble bounce spin"> и <div class="tumble">.
Во второй версии .toggleClass() используется второй параметр для определения того, следует ли добавлять или удалять класс. Если значение этого параметра true, то класс добавляется; если false, то класс удаляется. По сути, утверждение:
$( "#foo" ).toggleClass( className, addOrRemove );
эквивалентно:
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
} Начиная с jQuery 1.4, если аргументы не передаются в .toggleClass(), все классы на элементе в первый раз, когда .toggleClass() вызывается, будут переключены. Также начиная с jQuery 1.4, имя класса для переключения может быть определено путём передачи функции.
$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad";
}
}); В этом примере класс happy будет переключаться для <div class="foo"> элементов, если у их родительского элемента есть класс bar, в противном случае будет переключаться класс sad.
Примеры:
Переключить класс 'highlight' при нажатии на абзац.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$( "p" ).on( "click", function() {
$( this ).toggleClass( "highlight" );
});
</script>
</body>
</html> Демо:
Добавить класс "highlight" к нажатому абзацу при каждом третьем нажатии, удалить при первом и втором нажатии.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
<p class="blue">on these (<span>clicks: 0</span>)</p>
<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
<script>
var count = 0;
$( "p" ).each( function() {
var $thisParagraph = $( this );
var count = 0;
$thisParagraph.on( "click", function() {
count++;
$thisParagraph.find( "span" ).text( "clicks: " + count );
$thisParagraph.toggleClass( "highlight", count % 3 === 0 );
} );
} );
</script>
</body>
</html> Демо:
Переключить имя(на) класса на кнопках для каждого div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
.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;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div class="buttons">
<button>toggle</button>
<button class="a">toggle a</button>
<button class="a b">toggle a b</button>
<button class="a b c">toggle a b c</button>
<a href="#">reset</a>
</div>
<div class="wrap">
<div></div>
<div class="b"></div>
<div class="a b"></div>
<div class="a c"></div>
</div>
<script>
var cls = [ "", "a", "a b", "a b c" ];
var divs = $( "div.wrap" ).children();
var appendClass = function() {
divs.append(function() {
return "<div>" + ( this.className || "none" ) + "</div>";
});
};
appendClass();
$( "button" ).on( "click", function() {
var tc = this.className || undefined;
divs.toggleClass( tc );
appendClass();
});
$( "a" ).on( "click", function( event ) {
event.preventDefault();
divs.empty().each(function( i ) {
this.className = cls[ i ];
});
appendClass();
});
</script>
</body>
</html> Демо:
.toggleClass( [state ] )Возвращает: jQueryверсия устарела: 3.0
Описание:
-
версия добавлена: 1.4.toggleClass( [state ] )
- stateТип: БулевоБулево значение для определения того, следует ли добавлять или удалять класс.
-
