交换元素类

Question

我有以下代码：

<a href="#" class="more">text</a>

点击后如何在“更多”和“更少”之间切换课程？

$('a').click(function (e) {
  e.preventDefault();
  var $this = $(this);
  $this.toggleClass('more', 'less');
});

但我让班级从“更多”变为“”而不是更少。

谢谢你， 米格尔

Answer 1

使用切换并指定multiple class names即可实现此目的。它只会删除存在的类名和缺少的添加。但是你应该确保首先在元素中至少存在其中一个。

$this.toggleClass('more less');

<强> Fiddle

Answer 2

<a href="#" id="toggle">text</a>

$("a#toggle").toggleClass("more");
$("a#toggle").toggleClass("less");

or you can chain them together.

$("a#toggle").toggleClass("more");
             .toggleClass("less");

关键是：toggleClass只会在参数中添加/删除该类。它不会在括号中的类之间切换。