Атрибут класса jquery инвертировать при клике

Question

С этой простой разметкой:

<a id="foo" class="first" href="#"></a>

Я хочу получить что-то вроде этого:

$('#foo').click (function () { 
    if $('foo').hasClass('first') { $('foo').removeClass('first').addClass('second');

    if $('foo').hasClass('second') { $('foo').removeClass('second').addClass('first'); 
});

Я не знаю, в каком классе есть элемент, "первый" или "второй". Как можно делать это каждый раз, когда я нажимаю на элемент, обновляя чтение класса?

Хотел бы я быть ясным.

Любая помощь будет оценена.

Заранее спасибо.

Answer 1

Лучший способ использовать toggleClass() для переключения более чем одного класса за раз - это передать ему несколько классов одновременно, как показано ниже:

$('#foo').click(function() {
  $(this).toggleClass('first second');
});

Вы можете увидеть это здесь: http://jsfiddle.net/jfriend00/HWkWC/

Примечание: вы можете передать более одного класса в toggleClass() (через пробел), и он будет переключать каждый класс независимо, а не делать множественные вызовы toggleClass(). Все это описано в jQuery doc для toggleClass.

Answer 2

http://api.jquery.com/toggleClass/

$('#foo').click(function() {
   $(this).toggleClass('first').toggleClass('second');
}