jquery - 要素のクラスを入れ替える

Question

次のコードがあります。

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

クリックしたときにクラスを「多い」と「少ない」の間で切り替えるにはどうすればよいですか?

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

しかし、クラスが「より多く」から「」に変化し、より少なくはなりません。

ありがとう、ミゲル

Answer 1

トグルを使用して複数のクラス名を指定すると、これを実現できます。存在するクラス名を削除し、存在しないものを追加するだけです。ただし、それらの少なくとも 1 つが最初に要素に存在することを確認する必要があります。

$this.toggleClass('more less');

フィドル

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 は、パラメーターでそのクラスを追加/削除するだけです。括弧内のクラスは切り替えられません。