jQueryでクリックイベント後、もう一度クリックすると元に戻る実装方法

Question

要素をクリックしたとき文字色を赤にし、その状態で再度クリックすると元に戻るようにする。

上記内容をjQueryで実装したいのですが、addClass,removeClassを使う以外の実装方法ってありますか。

<div class="btn" id="js">要素</div>

Answer 1

addClass,removeClassを使う以外の実装方法ってありますか。

toggleClass を使えばいいのでは。

.red {
  color: red;
}

$('.btn').click(function() {
   $(this).toggleClass('red');
})

Comments

[nika_nika]

ありがとうございます！

Answer 2

classのstyleを編集する方法でどうでしょうか。

以下でclass名がbtnのcolorプロティの値にredをつけることでできます。
ここに、クリックした時の条件分岐で、もし、色がついていなかったら、赤にする。赤色だったら、元の色に戻すなどの処理で実現できると思います！

$(function() {
  $('.btn').css('color', 'Red');
});

Comments

[nika_nika]

ご回答ありがとうございます！

コードをなるべくすっきりしたいとおもったのですが、条件分岐以外の実装方法はないですよね？

[Pomu3270]

> コードをなるべくすっきりしたいとおもったのですが、条件分岐以外の実装方法はないですよね？
なるほどです。。。
jQueryにそこまでのプロパティやメソッドが用意されていないので、条件分岐で実装しなければいけないと思います。。。

[nika_nika]

ありがとうございます！！