toggleClass()

.toggleClass( имяКласса )

Возвращает: jQuery

Описание: Добавляет или удаляет один или несколько классов, от каждого элемента в наборе соответствующих элементов, в зависимости от наличия класса, либо значения переключающегося аргумента.

.toggleClass( имяКласса )

Добавлена в версию: 1.0

имяКласса

Строка

Один или несколько имен классов (разделенных пробелами), для переключения для каждого элемента в соответствующем наборе.

.toggleClass( имяКласса, переключатель )

Добавлена в версию: 1.3

имяКласса

Строка

переключатель

Логическое значение

Логическое значение, определяет должен ли класс быть добавленным или удаленным.

.toggleClass( function(индекс, класс), [переключатель] )

Добавлена в версию: 1.4

function(индекс, класс)

Функция

Функция, которая возвращает имена классов, которые будут переключены в атрибуте класса для каждого элемента в соответствующем наборе. Получает индекс положения элемента в наборе и старое значение класса в качестве аргументов.

переключатель

Логическое значение

Логическое значение, определяет должен ли класс быть добавленным или удаленным.

Этот метод принимает один или несколько имен классов в качестве параметра. В первом варианте, если элемент в соответствующем наборе элементов имеет класс, то он удаляется; если элемент не имеет класс, то он будет добавлен. Например, мы можем применить .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() позволяет нам указывать имя класса для переключения с помощью передачи в функцию.

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar')) {
    return 'happy';
  } else {
    return 'sad';
  }
});

Этот пример переключает класс happy для элементов <div class="foo"> если их родительский элемент имеет класс bar; в противном случае он будет переключать класс sad.

Примеры

Пример 1

При нажатии ЛКМ устанавливает/удаляет класс ‘highlight’.

$("p").click(function () {
      $(this).toggleClass("highlight");
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 1 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
  });
  </script>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder; 
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
  </style>
</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>
</body>
</html>

Попробуйте сами

Пример 2

Переключает класс «highlight» по каждому третьему нажатию ЛКМ.

    var count = 0;
    $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 2 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    var count = 0;
    $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
    });
  });
  </script>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder; 
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:red; }
  </style>
</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>
</body>
</html>

Попробуйте сами

Была ли эта информация полезной?

Да Нет

toggleClass()

.toggleClass( имяКласса )

.toggleClass( имяКласса )

.toggleClass( имяКласса, переключатель )

.toggleClass( function(индекс, класс), [переключатель] )

Примеры

Пример 1

Пример 1 - Полный код:

Пример 2

Пример 2 - Полный код:

Комментарии